仅使用CSS均衡同级高度？

Question

有没有一种方法使div与CSS的兄弟高度相同，还是只能用javascript实现？

在这个例子中，我有一个包装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>

Answer 1

您可以在包装（这工作，因为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>