如何使2个浮动div具有相同的高度？

Question

我的HTML看起来像这样：

unicode_escape

这是我的CSS：

<div class="tier-label">Foo</div>
<div class="tier-row">
    <!-- dynamic drag/drop zone -->
</div>

图像显示我想要做的事情并且已经开始工作

然而问题是：

右侧部分.tier-label { width: 50px; float: left; min-height: 90px; overflow: hidden; } .tier-row { margin-left: 50px; min-height: 90px; overflow: hidden; } 是放置区域，可以放置项目（图像）。当使用空格时，它将中断并启动新的行。这很好用。问题是，左侧部分tier-row没有随之增长。

如何调整CSS以使左侧部分与正确的部分一起成长？

Answer 1

更好的解决方案是，您应该围绕这两个元素添加 <div> 。然后将div display: table;width:100%和这些元素设为display: table-cell

<div class="tier-wrapper">
    <div class="tier-label">Foo</div>
    <div class="tier-row">
        <!-- dynamic drag/drop zone -->
    </div>
</div>

JSFiddle：https://jsfiddle.net/9ttfkw5t/6/

Answer 2

我刚才有一个非常相似的问题。我用jQuery解决了它。在正确的等级中断之后：

$(".tier-label").css("height",($(."tier-row").css("height"));

Answer 3

我按照@ ralph.m的建议，提出了这个非常简单的解决方案

.tier-container {
    display: -webkit-flex;
    display: flex;
}

.tier-label {
    width: 50px;
    float: left;
    min-height: 90px;
    overflow: hidden;
}

.tier-row {
    min-height: 90px;
    overflow: hidden;
    -webkit-flex: 1;
    flex: 1;
}