<分区>
当我发现 float 元素全部扩展到所在行中最高 block 的高度时，我正在制作一个 block 网格，有点像 Pinterest 布局。
“喂!”我想。 “如何应用它使我的侧边栏与我的内容高度相同!”但由于某种原因，它不能那样工作。我四处寻找等高列的解决方案，它只使用 float ，就好像它们是网格一样，但似乎没有。
所以我的问题可以总结为:如何像 float 正方形网格一样轻松制作等高列？
最佳答案
当然，您可以使用等高列——无需 hack、JavaScript 或额外的一百万位标记(尽管 IE7 或更低版本的支持不是很好)。秘诀是在相邻元素上使用 display: table-cell。
HTML:
<div class="container">
<div id="col1">
Small content here
</div>
<div id="col2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
CSS:
div.container { display: table }
div.container > div { display: table-cell; border: 1px solid; padding: 1em }
div#col1 { background: orange }
演示:
关于css - 为什么 CSS float 在我需要的时候不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13423440/