<div class="container">
<div class="item">
<div class="left">
lorem lorem
</div>
<div class="right">
<p>right</p>
<p class="bottom">bottom</p>
</div>
</div>
</div>
我有以下CSS：
.container {
float: left;
padding: 15px;
width: 600px;
}
.item {
float: left;
padding: 15px;
width: 570px;
}
.left {
float: left;
padding: 40px 20px;
margin-right: 10px;
}
.right {
position: relative;
float: left;
}
.bottom {
position: absolute;
bottom: 0;
}
左侧div的宽度和高度是动态的.
我想要实现的是：
>使右div的高度等于左div的高度.
>使右边的宽度用类项填充div的其余部分.
>类底部的段落应该在右边的底部.
这是一个代表我目标的简单形象：
解决方法
选项
浮动
如@joeellis所示,灵活宽度可以通过仅浮动左列,并将overflow：hidden应用于右列来实现.
任何浏览器都无法实现.bottom的位置.对于具有相等,可变高度的浮动列,没有CSS解决方案.绝对定位的.bottom元素必须位于右列div中,因此100％的宽度会给出正确的大小.但是由于右列不一定与左列一样高,所以将底部的位置.底部：0不一定将其放在容器的底部.
HTML表和CSS表
可以通过给左边的单元格宽度为1px而不指定正确的单元格的宽度来实现灵活的宽度.两个细胞都会增长以适应内容.任何额外的空间将被添加到正确的单元格.
如果.bottom位于正确的表格单元格中,则在Firefox中无法实现该位置. Firefox中的表格单元格中的相对位置没有影响;绝对位置和100％的宽度不会相对于正确的表格单元格.
如果.bottom被视为右列中的单独表格单元格,那么右侧和底部表格单元格的正确高度在Firefox以外的浏览器中无法实现.表单元格的高度不一样,宽度相同(Firefox除外).
CSS3 flexBox和CSS3网格
FlexBox和网格是不久的将来有前途的布局工具.但IE9或更早版本不支持flexBox,除IE10之外的任何浏览器都不支持网格.没有测试是否可以实现此布局,但浏览器支持可能会阻止它们成为当前的选项.
概要
>浮动不提供任何浏览器的解决方案.
> HTML表和CSS tables不提供跨浏览器解决方案.
> Flexbox不提供IE9 or earlier的潜在解决方案(并可能或可能不提供其他浏览器的解决方案).
> Grids只提供了一个潜在的解决方案IE10(并可能或可能不提供解决方案).
结论
目前似乎没有足够的CSS解决方案,其中一个可以在足够的相关浏览器中运行,可能的例外是flexBox(如果不需要IE9及更早版本的支持).
jQuery的
这是一个几个修改的演示,使用jQuery强制列具有相同的高度.两个演示的CSS和jQuery是一样的. HTML仅在左列和右栏有多少内容.所有浏览器中的两个演示都可以正常测试.相同的基本方法可以用于纯JavaScript.
> Taller content on the left
> Taller content on the right
为了保持简单,我将左右div的内部填充移动到子元素(.content).
