作者:AlanPearce　原文:Multi-ColumnLayoutsClimbOutoftheBox

　　我们都了解拥有相同高度的布局是很麻烦的事，有很多相关资料提到过相关设计方法，所以在这我就不多做解释了。

　　最近在研究一个两个栏目的动态布局，每个栏目背景不同。我立刻想起了DanCederholm的FauxColumns，但我仍然需要一个动态布局的方法。我又看了完美布局的文章OneTrueLayout，但是有很多bug，需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度，但是不行。绝望之余，几乎要用table布局，不，一定还有更好的方法。我想着一个问题“盒子外面是什么”，border！如果我可以使“sidebar”（或\"rail\"）的div相对与“content”的div浮动，就可以实现多栏目相同高度。这个方法在很多地方介绍过：DouglasLivingstone的introduced，Holly的extendedJohnBergevin的PositionIsEverything。由onetruelayout的方法发展而来，用更简洁清楚的代码实现了两个栏目的动态变化。

HTML代码:


CSS代码:


　　给contentdiv右加border，颜色宽度和rail一样，并相对与rail浮动。Margin:-150px;使raildiv移到margin腾出的空间。如果contentdiv变的比raildiv高，border随contentdiv变高。视觉效果就是好像raildiv也在变高。container的颜色设定和contentdiv一样，如果raildiv达到最高，container随之变高，这样就给我们content变高的效果。
　　看看效果。Seeitinaction。试改变字体大小，布局随之变化。

　　3个栏目：3个颜色
　　3个栏目的布局有点不同:直接给containerdiv加border.

HTML代码:


CSS代码:


　　中间的栏目margin-right:-150px使左边的raildiv始终沿中间栏目的左沿浮动，使旁边栏目在真确的位置显示。还有一些方法可以实现，但这个方法最好，更易实现流动布局（动态布局）。