Question

我想要做的是，如果行有一个div更大，那么行的所有其他项都会获得相同的高度。例如，问题是：http://i.imgur.com/40RJRt0.png

这是标记：

<div class="box clearfix">
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
</div>

.col-lg-4{
    width: 33.33333333333333%;
    float:left;
    height: 100%; 
}

高度100％不起作用，因为它们是浮动元素我想。我该如何解决这个问题？

Answer 1

高度100％适用于： - 指定外部块的高度，或高度绝对定位的元素。

Answer 2

你可以做这样的事情

<强> HTML

<div class="box clearfix">
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6"></div>
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6"></div>
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6"></div>
</div>

<强>的Javascript

$(function () {
    $('div.box').each(function () {
        var maxHeight = 0;
        $('div', this).each(function () {
            if (maxHeight < $(this).outerHeight()) maxHeight = $(this).outerHeight();
        }).css({
            'height': maxHeight
        });
    });
});

点击 JSFIDDLE

Answer 3

Ditch浮动并使用display: table和display: table-cell的组合。表格布局是实现相等高度列的一种可能方式。

＆＃13;

.box {
    display: table;
    width: 100%;
}
.col-lg-4 {
    width: 33.33333333333333%;
    background: #CCC;
    display: table-cell;
}
.col-lg-4:nth-child(even) {
    background: #EEE;
}

＆＃13;

<div class="box clearfix">
    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">One</div>
    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">Two<br/>Two</div>
    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">Three<br/>Three<br/>Three</div>
</div>

＆＃13;

Answer 4

100％只会让它100％到div内部。这就是为什么它不会保持不变。

尝试定义固定高度，例如“height：250px;”他们保持不变。

Answer 5

div class =“box clearfix”这个应该是100％，并将另一个div设置为恒定高度。例如身高：200px;

高度100％浮动元素

5 个答案: