探索CSS实现三行三列等高布局

【作者：greengnn 来源：网络更新时间：2006-6-7 | 字体：大中小】

第四步：让right也到自己的正确的位置上

从上图看，我们只需要把right推倒container的padding-right里面,看看怎么做

#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}

好了，现在元素们都正确归位了。

图5——right到了自己正确的位置

第五步：解决bug让布局更完美
如果浏览器窗口大小变更，center就变得比left小了，完美的布局就被打破，我们给body 设置一个min-width
来解决这个问题，因为IE不支持他，所以不会有负面影响，调整如下

body {
min-width: 550px; /* 2x LC width + RC width */
}

这时在IE6（完全打开的窗口）下，left元素具体左侧又太远了，再调整

* html #left {
left: 150px; /* RC width */
}

这些大小调整是根据上面已经定义的宽度来的，你调整的时候也要根据自己的实际情况。

现在增加padding

内容文字贴着容器的边，相信你看得时候，不会很舒服，调整一下

#left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
}

当然不能只增加left就算完事，要给一系列元素都必须加上，也要调整增加padding，带来的新的bug，调整如下

body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
clear: both;
}

/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}

header和footer的padding可以随意增加，这里就不提了，还有长度单位用em更具亲和力（em可以让用户使用浏览器来调整自己需要的字体大小）

但是不能混合使用，选择em和px的时候明智些,察看效果

元素等高问题
采用http://www.positioniseverything.net/articles/onetruelayout/equalheight
有人翻译过来的：http://www.itlearner.com/article/2006/3224.shtml

里提到的方法，就不具体解释了。

#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}

再解决opera 8的bug，代码调整如下

* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff; /* Same as body
background */
}

到此整个过程结束，察看最终效果,通过w3c 标准型

原文地址：http://www.jluvip.com/blog/article.asp?id=151

文章共2页,当前在第2页　9 7 [1] [2] 8 :

收藏此页到 IE收藏夹 POCO网摘 [365Key] [ViVi] 百度藏搜和讯网摘天极网摘狐摘向您的朋友推荐此文章
转载请注明来源：文章大全网址：http://www.itlearner.com/article/
文章关键词：div css
如意搜索搜索更多内容：探索CSS实现三行三列等高布局
特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们，我们会尽快予以更正。