一个不错的css——之三行三列等高格局.
css——之三行三列等高格局.
(2011-07-23 05:23:42)
转载▼标签：
杂谈
第一步：创立一个构造
xhtml开始于header, footer, and container
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
CSS先定义container，给即将加入的sideleft，和sideright留下个位置
#container {
padding-left: 200px;
padding-right: 150px;
}
我们的格局目前看起来是这么的
图1——创立框架
第二步：添置内容元素
在第一步基础上添置内容元素<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
然后离别定义widths和float 让元素编排在一条线上，还有打扫footer的飘拂对齐
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
这里给center元素定义了100% width，让它占满montainer的可用空间，目前的格局变成了这么
图2：添置内容元素
第三步：把left放到准确的位置
要把left放到准确的位置，我们分两步
1.让left和center在统一程度线#left {
width: 200px;
margin-left: -100%;
}
看看收获
图3——left挪动告终一半
2.用相对定位，把left继续挪动到准确的位置#container .columns {
float: left;
position: relative;
}
#left {
width: 200px;
margin-left: -100%;
right: 200px;
}
让left距离他右边元素center 200px后，行了，left终于到自己位置上了
图4——left到了自己的位置
第四步：让right也到自己的准确的位置上
从上图看，我们只必需把right推倒container的padding-right里面cowww.freety1.info.countingsheepboutique.com,看看怎么做
#right {
width: 150px;
margin-right: -150px;
}
好了，目前元素们都准确归位了。
图5——right到了自己准确的位置
第五步：处理bug让格局更健全
万一博览器窗口大小改变，center就变得比left小了，健全的格局就被突破，我们给body 设置一个min-width
来处理这个问题，因为IE不扶持他，因而不会有负面波及，调剂如下
body {
min-width: 550px;
}
这时在IE6（全面敞开的窗口）下，left元素翔实左侧又太远了，再调剂
* html #left {
left: 150px;
}
这些大小调剂是依据上面曾经定义的宽度来的，你调剂的时候也要依据自己的切实情形。
目前添置padding
内容文字贴着容器的边，可信你看得时候，不会很舒服，调剂一下
#left {
width: 180px;
padding: 0 10px;
right: 200px;
margin-left: -100%;
}
当然不能只添置left就算完事，要给一系列元素都定然加上，也要调剂添置padding，带来的新的bug，调剂如下
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -190px;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}header和footer的padding能够容易添置，这里就不提了，还有长度单位用em更具亲和力（em能够让用户利用博览器来调剂自己必需的字体大小）
然而不能混杂利用，抉择em和px的时候明智些,察看收获
元素等高问题
批准om/tech/web/2006/3210.asp
里提到的措施，就不翔实解释了。
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px;
margin-bottom: -20000px;
}
#footer {
position: relative;
}
再处理opera 8的bug，代码调剂如下
<div id="footer-wrapper">
<div id="footer"></div>
</div>* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}到此全副过程告终，察看最后收获,穿越w3c 规范型而不是靠漫无目标的博览代码来觉察讹谬，那么代码审查的收获会事半功倍。
