等高布局

等高栏的容器添加 .equalheight-box 子元素添加 .equalheight-item 可以实现等高。

2 column width equal height

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Just another column floated to right

3 column width equal height

Just another column floated to right

HTML:
<div class="equalheight-box"gt;
    <div class="equalheight-item fl">...</div>
    <div class="equalheight-item fl">...</div>
    <div class="equalheight-item fr">...</div>
</div><!-- //div .equalheight-box -->

CSS:
/* 记得更改宽度，如果页面不是960px的话 */
.equalheight-box{
    /*width: 960px;  /* 需重设 */
    overflow: hidden;
}

/* 等高 */
.equalheight-item{
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

问题及注意事项：

如上布局，当需要的时候，如果有n栏，那么，< n 的栏都用 .fl 让它 float:left；第n栏，也就是最近一栏使用 .fr 向右浮动。

等高布局

2 column width equal height

3 column width equal height

问题及注意事项：

思考：如何实现多项（多列多行），同行等高，不同行自适应且等高于此行最高列？