Question

我想使浮动div具有相同的高度。我在当前的解决方案中使用JavaScript，尽管如果有人知道在CSS中使用JavaScript的方法会更好。

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

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

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

articles.height（最高）;

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

提前致谢

Answer 1

一种解决方案是使用display: table和table-cell。

.container {
    padding-bottom: 30px;
    display: table;
}

.article {
    display: table-cell;
    /* float: left; if required */
    width: 30%;
    margin-right: 15px;
    background: #f3f3f3;
    padding: 20px;
}

如果需要，你仍然可以浮动它们。

您需要使用border-collapse和border-spacing来弥补它们之间的差距：

.container {
    padding-bottom: 30px;
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
}

Answer 2

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

无论如何，这里是：

小提琴：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%;
}

Answer 3

这是其他一些技巧。

扩展你的例子的小提琴：

http://jsfiddle.net/LTds9/

<强> HTML

<div class="container ovrfl prel">
    <div class="article prel">
        <h2>Lorem ipsum</h2>
        <p>Maecenas adipiscing ullamcorper sagittis. Nam luctus consequat convallis. Mauris hendrerit a purus commodo semper. Ut id fringilla nibh. Suspendisse massa velit, dapibus sed elit sit amet, posuere tincidunt.</p>
        <div class="pabs"></div>
    </div>

    <div class="article prel">
        <h2>Lorem ipsum</h2>
        <p>Maecenas adipiscing ullamcorper sagittis. Nam luctus consequat convallis. Mauris hendrerit a purus commodo semper. Ut id fringilla nibh. Suspendisse massa velit, dapibus sed elit sit amet, posuere tincidunt lacus. Donec quis dui non sem iaculis venenatis. Curabitur vitae luctus lectus, sed pellentesque tellus. Vestibulum semper eu tortor semper ornare.</p>
    </div>

    <div class="bott pabs"></div>
</div>

<强> CSS

.container {
    padding-bottom: 30px;
}

.article {
    float: left;
    width: 30%;
    margin-right: 15px;
    background: #f3f3f3;
    padding: 20px;
}

.article p, .article h2 {
    color: black;
}

.prel{
    position:relative;
}
.pabs{
    position:absolute;
}

.container .pabs{
    left:0;
    right:0;
    z-index:-1;
    height:300px;
    background-color:inherit;
}
.ovrfl{
    overflow-y:hidden
}

.container .bott{
    left:0;
    right:0;
    bottom:0;
    height:30px;
    background-color:#fff;
}

浮动divs的高度相同

3 个答案: