我怎样才能保持两个并排的天线保持相同的高度？

Question

我怎样才能保持两个并排的天线保持相同的高度？

我有两辆车并排着。我希望它们的高度是一样的，如果其中一个调整大小的话，保持不变。但我还是搞不懂这个。想法？

为了澄清我令人困惑的问题，我希望两个盒子的大小总是一样的，所以如果其中一个是因为文本被放进去而增长的，那么另一个应该增长以与高度相匹配。

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

Answer 1

这是许多人遇到过的一个常见问题，但幸运的是，一些聪明的头脑像埃德·艾略特在他的博客上已经在网上发布了他们的解决方案。基本上，您所做的是使两个div/列非常通过添加一个padding-bottom: 100%然后“欺骗浏览器”认为他们没有那么高margin-bottom: -100%..埃德·艾略特在他的博客上对此做了更好的解释，其中也包括了许多例子。.container {&nbsp; &nbsp; overflow: hidden;}.column {&nbsp; &nbsp; float: left;&nbsp; &nbsp; margin: 20px;&nbsp; &nbsp; background-color: grey;&nbsp; &nbsp; padding-bottom: 100%;&nbsp; &nbsp; margin-bottom: -100%;}<div class="container">&nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; Some content!<br>&nbsp; &nbsp; &nbsp; &nbsp; Some content!<br>&nbsp; &nbsp; &nbsp; &nbsp; Some content!<br>&nbsp; &nbsp; &nbsp; &nbsp; Some content!<br>&nbsp; &nbsp; &nbsp; &nbsp; Some content!<br>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; Something&nbsp; &nbsp; </div></div>