如何使两个并排的div保持相同的高度？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有两个div并排。我希望它们的高度相同，并且如果其中之一调整大小，则保持不变。我无法弄清楚这一点。有想法吗？

为了澄清我的困惑问题，我希望两个框的尺寸始终相同，因此如果一个框由于文本放置而增大，则另一个框应与高度匹配。

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>

回答：

使用flexbox时，它是一个声明：

.row {
  display: flex; /* equal height of the children */
}
.col {
  flex: 1; /* additionally, equal width */
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

以上是 如何使两个并排的div保持相同的高度？ 的全部内容， 来源链接： utcz.com/qa/422590.html

回到顶部