在这种情况下，我怎样才能将相等高度应用于浮动DIV？

问题描述：

我正在动态解析在两列中彼此向左浮动的DIV。现在的问题是，如果任何DIV的内容/高度比另一个更大，页面看起来很乱，因为没有清除浮动内容。在这种情况下，我怎样才能将相等高度应用于浮动DIV？

我在问我怎样才能让所有的DIV具有相同的高度？（所有的DIVS都有一个像这样的特定类.cat-widget）我只是希望它们在页面上完全浮动而不会出现问题和排列。

任何建议，最佳做法做到这一点请让我知道。

你能不能设置一个明确的高度要应用的类到divs？ – Kyle 2010-12-02 08:34:27

我不能。内容是动态和可变的。否则，我可以为给定类别设置固定高度 – 2010-12-02 08:58:23

答

该解决方案奇妙的作品：

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

UPDATE

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

答

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

答

适用height和overflow:hidden向所有div

内容是动态的，因此我无法设置固定高度。这就是为什么 – 2010-12-02 08:51:39

答

我实际使用，在需要的时候：

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

内容是动态的，我无法确切知道用户将放置在窗口小部件中，高度是可变的。 :( – 2010-12-02 08:52:17

答

一个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/

在这种情况下，我怎样才能将相等高度应用于浮动DIV？

相关推荐