CSS网页布局实例:三栏等高布局

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

心，至于32767 这个数你可以理解成“足够大”，以便于有足够的空间去扩展它的盒子，这么高应该是巨人症吧，没关系，我们可以用margin-bottom的负值去隐藏它，这个技巧，在我看来，我真的解释不清楚，有句古话：意会，言传！你只要试试看，就会领会到其中的奥妙。下边这幅图对你的理解应该有帮助：

到了这步，你会发现这3列的盒模型为32767px，此时你要在父元素上加：overflow: hidden;当然IE6.0是：zoom:1;

#container  {
    background-image: url(''bg.gif'');
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

Step4:
现在#main的视觉效果是在最左栏，我们要想办法把它搞成中间
思路：先把#main排到中间，我们可以#main{margin-left:300},这时，#left被挤到800px的位置，在#left{margin-left:-800px;}就能搞定，可惜啊，IE6这个贱货，实在是无语，只得重新思考了。

一般的，在css做布局时，有几种思路，一种是float,一种是定位，关于定位的话，不熟悉的google一下就行，提一下：position: relative;的这个属性，如果不指明top,left的话，它的视觉效果不会改变。
所以，为了让#main在视觉效果上有所突破，那么必须指明top或者left，在这里只需要指明left就行了,

#main {
    float: left;
    background-color: #e5e5e5;
    width: 500px;
    left: 300px;
}
#left {
    float: left;
    background-color: #7bd;
    width: 300px;
    left: -500px;
}

其实在这中间，还有一个概念是比较重要的，#main，#left有了position:relative以后，就有了层的概念，所以当#main{left:300px}后，#left已经独立出来了，不会被挤到800px的位置了，故：之需要left:-500px就能达到左边，500是#main的宽。
最后考虑的是向下兼容，
提供一段代码：

虽然写了这么多，但是你能够做，并不代表你应该这么做，这是一个战术和战略的问题，以下是我个人想知道的：
我觉得一开始：

padding-bottom: 32767px;
margin-bottom: -32767px;

这么大的值，在reflow阶段会不会很耗资源，而采用js来控制他们的高度，会不会来得更轻松一些呢？

第一次写这种东东，感到很

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

分享到：更多

你可能对下面的文章感兴趣

上一篇: 如何在CSS中设定文本的尺寸下一篇: css字体设置(不同浏览器设置效果)

关于CSS网页布局实例:三栏等高布局的所有评论

随机推荐