内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
我有两块硬币并排着。我希望它们的高度是一样的,如果其中一个调整大小的话,保持不变。但我还是搞不懂这个。想法?
为了澄清我令人困惑的问题,我希望这两个盒子的大小总是一样的,所以如果一个盒子因为文本被放进去而增长,那么另一个盒子应该长得与高度相匹配。
<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>
这是许多人遇到过的一个常见问题基本上,你所做的是使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>