需求
有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
把多于最高子元素高度的部分隐藏掉即可实现。