用CSS实现等高列_html/css_WEB-ITnose

需求

有3个水平方向的块，块的内容有多有少。在不设置高度的情况下，高度不等。现要求3个水平块都有相同的高度，高度等于最高的块的高度。

Method 1

使用table布局。在table中，在同一行中的单元格是等高的。

Method 2

如下：

https://jsfiddle.net/maydayuiui/0rydnyv7/

通过设置padding-bottom把块的高度撑开，使得他们远远大于内容的高度。再设置margin-bottom，在没有为块设置高度的情况下，计算块的高度时，会使用padding-bottom margin-bottom加上内容高度的方式计算高度。把margin-bottom设置成负值，绝对值等于padding-bottom。这样计算出的高度就等于内容的高度。这时最高的块的高度决定了父元素的高度。子元素的显示效果则包括padding的效果。最后再为父元素设置overflow: hidden把多于最高子元素高度的部分隐藏掉即可实现。