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

Posted 2023-03-05

【中文标题】仅使用 CSS 均衡兄弟姐妹的高度？ [复制]

【英文标题】：Equalise Height of a Sibling with CSS only? [duplicate]

【发布时间】：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>

【参考方案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>