CSS设计多列多模块等高网页布局- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS设计多列多模块等高网页布局

CSS样式表: DIV和CSS排版中制作细线条的方法小结; 在解决ul居中问题时想到的几点; 网页编辑中CSS样式表技巧总结; 一个老外弄的Clearing floats(清除浮动的方法); 常用的DIV+CSS的基本框架结构但不推荐都放一个div里; 无js5款纯div+css制作的弹出菜单标准; 超强推荐CSS打造经典鼠标触发显示选项; CSS网页布局入门教程5：二列宽度自适应; CSS网页布局入门教程6：左列固定，右列宽度自适应; CSS网页布局入门教程7：二列固定宽度居中; CSS网页布局入门教程9：用CSS设计网站导航——横向导航; CSS网页布局入门教程10：带当前标识的标签式横向导航; CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版; CSS网页布局入门教程12：纵向导航菜单; CSS网页布局入门教程13：下拉及多级弹出式菜单; CSS网页布局入门教程14：纵向下拉及多级弹出式菜单; 解读css发展历史; 让用户自己控制网页字体的大小的css书写方法; CSS注释、命名、继承性、样式排序等CSS技巧的小结; CSS标签切换代码实例教程比较漂亮

No. « ‹ 40 41 42 43 › »

技术文章搜索

关键字

CSS样式表中的 CSS设计多列多模块等高网页布局

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 153 ::

收藏到网摘: n/a

CSS布局:居左之后居右是100%宽度显示问题真正的利用DIV+CSS优化站点

　　首先给大家看一个图：

　　以前我们在布局这种需要多列多模块，多列等高，一般会选择横着切一张背景图来进行模拟，这个也是没有办法的办法。

　　我们知道单纯的两列等高我们可以利用正内边距加负外边距来实现。padding-bottom:32767px; margin-bottom:-32767px;

　　这个方法的原理是事先通过正内边距来使其拥有足够高的布局控件，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。

　　习惯思维上，我们都是多列等高，然后把这几列都浮动。现在我们变换一下思路，直接使用不浮动的一列的时候，情况会怎样，我们发现，当一列不浮动搭配正内边距加负外边距，父元素溢出隐藏，它的高度跟还是由内在元素来决定，但是通过web developer toolbar我们可以看到它实际上已经占据了足够的高度空间。

　　同样的道理，定位也遵循这个规则。我们可以把两侧边框使用绝对定位来固定到两侧，因为绝对定位是不占布局空间的，那么我们需要一个文档流来对父元素进行占位。基本上父元素有多高，就显示绝对定位的元素多少内容，实际上这也就实现了一个等高。

　　知道了这个表现原理，那么我们上文的布局也就不难了，只需要把每列最后一个模块再进行正内边距加负外边距来进行空间占位就可以实现了！至于下边框，实际上另外一个容器从底下进行拼装实现的~！

　　下面放上全部代码：

<!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>无标题 1</title> <style type="text/css"> * {margin: 0; padding: 0;} body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } .main {overflow: hidden; width: 800px; margin: 0 auto;} .left {float: left; width: 250px; overflow: hidden; } .center {float:left; margin-left:5px; width:295px; } .right {float: right; width: 245px; overflow: hidden;} .bor_top { height:1px; background:#FB9D51; overflow:hidden; } .equal {padding-bottom: 32767px; margin-bottom: -32767px;} .box {background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px; padding-right:10px;} .mt5 {margin-top: 5px;} </style> </head> <body> <div class="main"> <div class="left equal"> <div class="box"> <p>你相信这个左右等高的布局是纯的CSS写的吗？</p> </div> <div class="box mt5"> <p>来测试一下吧？~！</p> </div> <div class="box mt5"> <p>测试一下</p> </div> <div class="equal mt5 box"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div> <div class="center equal"> <div class="box"> <p>不由得你不信，这个的确是纯CSS写的</p> </div> <div class="box mt5"> <p>来测试一下吧？~！</p> </div> <div class="box mt5"> <p>测试一下</p> </div> <div class="equal mt5 box"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div> <div class="equal right"> <div class="box"> <p>测试一下</p> <p>测试一下</p> </div> <div class="box mt5"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> <div class="box mt5"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> <div class="equal mt5 box"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div> </div> <div class="main"><div class="left bor_top"></div><div class="center bor_top"></div><div class="right bor_top"></div></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

　　上述代码在IE6,IE7,FIREFOX里皆能正常显示，但是在IE8 BETA1里面，似乎必须配合浮动，正内边距跟负外边距的多余空间才能被隐藏，希望正式版的IE8会修复这一点。如果想在IE8 BETA1里面正常显示，请大家把最后一个模块也进行浮动即可~！在此就不做演示了！

CSS布局:居左之后居右是100%宽度显示问题真正的利用DIV+CSS优化站点

CSS样式表 中的 CSS设计多列多模块等高网页布局

评论 (0) All

CSS样式表中的 CSS设计多列多模块等高网页布局