最近在研究一个两个栏目的动态布局,每个栏目背景不同。我马上想起了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代码:
示例代码 [www.CuoXIn.com]
<div id="container"> <div id="content">This is<br />some content</div> <div id="rail">This is the rail</div> </div>
CSS代码:
示例代码 [www.CuoXIn.com]
#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 。试改变字体大小,布局随之变化。
#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; }