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

小编典典

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

html

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

阅读 727

2020-05-10

共1个答案

小编典典

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>

2020-05-10