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

您可以在 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>

仅使用 CSS 使兄弟姐妹的身高相等？

Equalise Height of a Sibling with CSS only?

css

height

siblings