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%;
}

如何给 float div整个包装纸的高度(其高度变化)?

没有jQuery是否有可能?

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

最佳答案

display: table解决方案

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

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

我认为这是最好的解决方案,但是not compatible before IE8

这是此解决方案的Fiddle

使用绝对定位

绝对定位的元素尊重其相对 parent height:

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

通常,在大多数情况下,我不建议绝对定位。但是由于您仍然有固定的width,因此也许是都没有关系。但是请注意,这将忽略.left中的长内容。高度仅由.right控制。

这是一个update to your Fiddle
flex ible解决方案

这是如此新,我不建议立即使用它,只是为了完整起见。您可以使用CSS3 flex ,但要注意browser compatibility:

.wrapper {
    display: flex;
}

Fiddle(已在当前的Chrome和Firefox中测试)。
grid布局

CSS grid 甚至比flexbox更新,也可以完美地解决布局问题。

.wrapper {
    display: grid;
    grid-template-areas: 'left right';
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

Browser compatibility很罕见,如果您返回 View 版本。此外,在我看来,这对于OP的方案来说是过大的了,但是对于将来更复杂的布局问题,这是一件非常有力的事情。

Fiddle中看到它。

关于css - 如何使元素在包装器的整个高度上 float ?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15817019/

10-11 23:25
查看更多