Как я могу применить равные высоты к плавающим DIVs в этом случае?

Question

Я динамически разбираю DIVs, которые плавают слева друг на друга в двух столбцах. Проблема теперь в том, что если у любого DIV больше контента/высоты, чем у другой, страница выглядит беспорядочной, потому что нет никакой очистки для поплавков.

Я спрашиваю, как я могу сделать все DIVs одинаковой высоты? (У всех DIVS есть определенный класс, похожий на этот .cat-widget). Я просто хочу, чтобы они были одинаковыми по высоте, чтобы плавать без проблем и идеально сочетаться на странице.

Любые предложения, наилучшая практика для этого, пожалуйста, дайте мне знать.

Answer 1

Это решение прекрасно работает:

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

решение

Answer 2

Этот вопрос полезный? Both columns same height as deepest column?

Answer 3

применять height и overflow:hidden для всех дивы

Answer 4

я использую, когда это необходимо:

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

Answer 5

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/