如何保持两个并列的div是相同的高度？

编程入门行业动态更新时间:2024-10-23 18:23:03

本文介绍了如何保持两个并列的div是相同的高度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有两个div。我想他们的高度是一样的，如果其中一个调整大小保持不变。我不能算出这一个。想要吗？

为了澄清我混淆的问题，我想让两个框总是相同的大小，所以如果一个增长，因为文本被放入其中，另一个

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

解决方案

Flexbox

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

.row {display：flex; / *等于孩子的高度* /}。col {flex：1; / *另外，等宽* / padding：1em; border：solid;}

< div class = > < div class =col> Lorem ipsum dolor sit amet，consectetur adipisicing elit。< / div> < div class =col> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 < / 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>