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

2022-01-30 00:00:00 html-table html css flexbox

我有两个并排的 div 元素.我希望它们的高度相同，并且如果其中一个调整大小时保持不变.如果一个增长是因为文本被放入其中，另一个应该增长以匹配高度.不过我想不出来这个.有什么想法吗?

<div style="overflow: hidden">

解决方案

Flexbox

对于 flexbox，它是一个声明:

.row {显示:弯曲；/* 孩子的身高相等 */}.col {弹性:1；/*另外，等宽*/填充:1em；边框:实心；}

<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 v​​elit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div></div>

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

I have two div elements side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. If one grows because text is placed into it, the other one should grow to match the height. I can't figure this one out though. Any ideas?

<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

With flexbox it's a single declaration:

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

Prefixes may be required for older browsers, see browser support.

相关文章