垂直三栏规划拥有相反高度的方法(转)
日期：2013-05-27 浏览次数：21121 次
最近在研讨一个两个栏目的动态规划，每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns，但我仍然需求一个动态规划的方法。我又看了完满规划的文章One True Layout，但是有很多bug，需求许多注释和程序。甚至考虑用JavaScrip来实现栏目一直保持同一高度，但是不行。绝望之余，几乎要用table规划，不，一定还有更好的方法。我想着一个问题“盒子外面是什么”，border！如果我可以使“sidebar”（或"rail"）的div绝对与“content”的div浮动，就可以实现多栏目相反高度。这个方法在很多地方引见过：Douglas Livingstone的introduced ，Holly的extended John Bergevin的Position Is Everything。由one true layout的方法发展而来，用更简约清楚的代码 实现了两个栏目的动态变化。下面是代码：
HTML:
<div id="container">
<div id="content">This is<br />some content</div>
<div id="rail">This is the rail</div>
</div>
CSS:
#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content{
background-color:#0ff;
width:600px;
border-right:150px solid #f00; »
/* The width and color of the rail */
margin-right:-150px; /* Hat tip to Ryan Brill */
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
}
给content div右加border，颜色宽度和rail一样，并绝对与rail浮动。Margin:-150px;使rail div移到margin腾出的空间。如果content div变的比rail div 高，border随content div变高。视觉效果就是好像rail div也在变高。container的颜色设定和content div一样，如果rail div达到最高，container随之变高，这样就给我们content变高的效果。
看看效果。See it in action 。试改变字体大小，规划随之变化。
3个栏目：3个颜色
3个栏目的规划有点不同:直接给container div加border.
HTML:
<div id="container">
<div id="center">CENTER<br />COLUMN CENTER</div>
<div id="leftRail">LEFT RAIL</div>
<div id="rightRail">RIGHT RAIL</div>
</div>
CSS:
#container{
background-color:#0ff;
float:left;
width:500px;
border-left:150px solid #0f0; »
/* The width and color of the left rail */
border-right:200px solid #f00; »
/* The width and color of the right rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
两头的栏目margin-right:-150px 使左边的rail div一直沿两头栏目的左沿浮动，使旁边栏目在真确的位置显示。还有一些方法可以实现，但这个方法最好，更易实现流动规划（动态规划）。
由于边栏在container div外，浮动在border上。使用overflow: hidden使之隐藏：IE不支持，Firefox可以实现。边栏不需求设置颜色，它会于container div的颜色保持分歧。
流动规划
了解定宽规划之后，我尝试把这个方法用到动态规划中去。边栏仍然需求设置固定宽，很多浏览器不支持border:**%的属性。但是我门可以使两头栏目自顺应。
CSS:
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:150px solid #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}
3个栏目自顺应规划
方法简单，不需求援用图片，没有BUG.
HTML:
<div id="container">
<div id="center">Center Column Content</div>
<div id="leftRail">Left<br /> Sidebar</div>
<div id="rightRail">Right Sidebar</div>
</di
