css – 如何浮动一个元素离开包装器的完整高度？

HTML：

<div class="wrapper">
    <div class="left">
        Foo
    </div>
    <div class="right">
        Text row 1
    </div>
</div>

<div class="wrapper">
    <div class="left">
        Foo Bar
    </div>
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
</div>

CSS：

.wrapper {
    overflow:hidden;
}

.left {
    width:80px;
    float:left;
    height:100%;
}

我如何给浮动div的包装器的完整高度(其高度是变化的)？

是没有jQuery的可能吗？

测试：http://jsfiddle.net/Q6B43/

解决方法

显示：表格解决方案

在表内，一行的每个单元格具有相同的高度。

.wrapper {
    display: table;
    width: 100%;
}
.left,.right {
    display: table-cell;
}

这是我认为最好的解决方案，但在IE8之前不兼容。

这里是这个解决方案的Fiddle。

使用绝对定位

绝对定位元素尊重他们的相对父母高度：

.wrapper {
    position: relative;
    padding-left: 85px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}

通常我不推荐绝对定位在大多数情况下。但是因为你有一个固定的宽度反正，也许没关系。但要注意，这将忽略.left中的长内容。高度只是由.right控制。

这是一个update to your Fiddle。

灵活的解决方案

这是新的，我不会建议使用它，现在，但只是为了完成。你可以使用CSS3 flex：

.wrapper {
    display: flex;
}

Fiddle(在当前的Chrome和Firefox中测试)。

原文地址：https://www.jb51.cc/css/220302.html