我有两个并排的 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
对于 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>
旧版浏览器可能需要前缀,请参阅 browser support .
关于html - 如何使两个并排的 div 元素保持相同的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53991348/