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

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 {

    overflow: hidden;

}

.column {

    float: left;

    margin: 20px;

    background-color: grey;

    padding-bottom: 100%;

    margin-bottom: -100%;

}

<div class="container">

    <div class="column">

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

        Some content!<br>

    </div>

    <div class="column">

        Something

    </div>

</div>