Question

我正在动态解析在两列中相互浮动的DIV。现在的问题是，如果任何DIV的内容/高度高于另一个，那么页面看起来很乱，因为浮动没有清除。

我问我怎么能让所有DIV都有相同的高度？（所有DIVS都有一个像这样的特定类.cat-widget）我只是希望它们在相同高度上浮动而没有问题，并且在页面上完美排列。

任何建议，最佳做法请告诉我。

Answer 1

这个问题有用吗？ Both columns same height as deepest column?

Answer 2

此解决方案非常有效：

<div style='display:table'>
  <div style='display:table-row'>
    <div style='display:table-cell'>..content..</div>
    <div style='display:table-cell'>..content..</div>
  </div>
</div>

<强>更新

Working example here和教程here。刚刚在FF 3.6，IE8，Chrome 7和Safari $中进行了测试。

Answer 3

您可以依赖的Javascript解决方案是：

// get both heights
var heightFirst   = document.getElementById('....').offsetHeight;
var heightSecond  = document.getElementById('....').offsetHeight;

// find largest
var maxHeight = Math.max(heightFirst, heightSecond);

// set both to largest
document.getElementById('....').style.height = maxHeight + 'px';
document.getElementById('....').style.height = maxHeight + 'px';

这里还有一些CSS解决方案： http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

Answer 4

将height和overflow:hidden应用于所有div

Answer 5

我实际上在需要时使用：

<div class="somename" style="min-height: 300px;">

在这种情况下，如何将相同的高度应用于浮动DIV？

5 个答案: