jquery - float div高度相同

Question

我想让 float 的 div 具有相同的高度。我在当前的解决方案中使用 JavaScript，但如果有人知道仅在 CSS 中执行此操作的方法，那就更好了。

当前解决方案:我获取并存储最高 div 的值，然后将其应用于其他 div。现在的问题是，我正在处理流畅/响应式布局，在调整浏览器窗口大小时，内容会扩展/缩小，但 div 的高度不会随之变化。例如，文本将跳出其容器并使窗口变小。

jsfiddle of my code

var tallest = 0;
var articles = $(".article");

articles.each(function(){
   if ($(this).height() > tallest) {
        tallest = $(this).height();
   }
});

articles.height(最高);

知道如何解决这个问题吗？

提前致谢

Answer 1

有一种(hacky)css 方式。另外，我不知道它是如何工作的，也不记得我是在哪里读到它的。

无论如何，这里是:

fiddle :http://jsfiddle.net/Varinder/vqG2L/

HTML

<div class="columns-wrapper">
    <div class="column">

    </div>
    <div class="column">

    </div>
    <div class="column">

    </div>
    ...
</div>

CSS

.columns-wrapper {
    position:relative;
    overflow:hidden;
}

.column {
    background:#ccc;
    padding-bottom:999em;
    margin-bottom:-999em;
    float:left;
    width:33%;
}