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/