快速业务通道

CSS设计多列多模块等高网页布局

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-04

  首先给大家看一个图:

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

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

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

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

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

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

  下面放上全部代码:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号