CSS 网页布局实例：横向分栏水平居中的实现

发布时间：2018-09-16 17:22:33 所属栏目：经验来源：站长网

导读：CSS 网页布局实例：横向分栏水平居中的实现 CSS 横向分栏布局实例，在内容显示区，因为元素未定义高度，所以必须添加内容，才能更好地显示元素的位置。也就是给正文显示区更大的余地，让内容决定正方的高度，因为本布局实例就是横向不变竖向变，以满足不同

　　CSS 横向分栏布局实例，在内容显示区，因为元素未定义高度，所以必须添加内容，才能更好地显示元素的位置。也就是给正文显示区更大的余地，让内容决定正方的高度，因为本布局实例就是横向不变竖向变，以满足不同的布局需要。

　　烈火提示：只是简单的布局实例，样式并未美化，喜欢的朋友可以自己通过CSS美化，如果您还不熟悉CSS，请阅读由烈火提供的CSS中文手册。

　　以下是实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css横向分栏</title> <style> body { margin:0; } #main { margin:0 auto; width:760px; border:none; } #header { height:100px; margin:5px 0; } #nav { height:20px; margin:0 0 5px; } #content { margin:0 0 5px; } #footer { height:30px; } div { border:1px solid #000000; } </style> </head> <body> <div id="main"> <div id="header">header部分</div> <div id="nav">nav部分</div> <div id="content">这里是内容部分<br />因为元素未定义高度<br />所以必须添加内容<br />才能更好地显示元素的位置</div> <div id="footer">footer部分</div> </div> </body> </html>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!