仅使用CSS均衡同级高度?
问题描述:
有没有一种方法使div与CSS的兄弟高度相同,还是只能用javascript实现?仅使用CSS均衡同级高度?
在这个例子中,我有一个包装div的两个div,我希望左边的那个与右边的大小相同。
代码如下。
#wrapper {width: 50%; height; 200px;}
#box1 {background: red;}
#box2 {background: blue; height: 100px;}
.box {float: left; color: white; width: 50%;}
<div id="wrapper">
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
</div>
答
您可以在包装(这工作,因为align-items
属性为stretch
默认情况下)使用display: flex
- 看演示如下:
#wrapper {display: flex;width: 50%; height; 200px;}
#box1 {background: red;}
#box2 {background: blue; height: 100px;}
.box {float: left; color: white; width: 50%;}
<div id="wrapper">
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
</div>
感谢Kukkuz,这是一个令人担忧的简单答案:) –