仅使用 CSS 均衡兄弟姐妹的高度？ [复制]答案

【问题标题】：Equalise Height of a Sibling with CSS only? [duplicate]仅使用 CSS 均衡兄弟姐妹的高度？ [复制]
【发布时间】：2018-02-04 22:10:59
【问题描述】：

有没有办法仅使用 CSS 使 div 与兄弟的高度相同，或者这只能通过 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>

【问题讨论】：

标签： css height siblings

【解决方案1】：

您可以在 wrapper 上使用display: flex（这是因为align-items 属性默认为stretch）- 参见下面的演示：

#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>

【讨论】：