CSS 嵌套容器上的高度相同
示例
此代码确保所有嵌套容器的高度始终相同。这是通过确保所有嵌套元素的高度与包含其的parrentdiv相同的高度来完成的。
由于该属性默认align-items设置为stretch,因此可以实现此效果。
的HTML
<div class="container">
<div style="background-color: red">
Some <br />
data <br />
to make<br />
a height <br />
</div>
<div style="background-color: blue">
Fewer <br />
lines <br />
</div>
</div>的CSS
.container {
display: flex;
align-items: stretch; // 默认值
}注意:不适用于10以下的IE版本