僅使用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>