小编典典

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

all

我有两个并排的 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>

阅读 108

2022-03-11

共1个答案

小编典典

弹性盒

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

旧浏览器可能需要前缀，请参阅浏览器支持。

2022-03-11