如何让两个并排的 div 保持相同的高度? [英] How do I keep two side-by-side divs the same height?

问题描述

我有两个并排的 div.我希望它们的高度相同，如果其中一个调整大小，则保持不变.虽然我想不通这一点.想法?

为了澄清我令人困惑的问题，我希望两个框的大小始终相同，因此如果一个框因为文本放入其中而变大，另一个应该变大以匹配高度.

<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">一些内容！<br/>一些内容！<br/>一些内容！<br/>一些内容！<br/>一些内容！<br/>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">一些内容！

解决方案

Flexbox

对于 flexbox，它是一个单一的声明:

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

<div class="col">Lorem ipsum dolor sat amet, consectetur adipisicing elit.</div><div class="col">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Ad omnis quae expedita ipsum nobis praesentium v​​elit animi 减去 amet perspiciatislaboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>

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

I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas?

To clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

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

这篇关于如何让两个并排的 div 保持相同的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！