http://jsbin.com/upohag/1/edit
蓝色 div 应该占据绿色和紫色 div 之间的空间。我不知道绿色 div 的宽度,但随着它变大,蓝色的宽度应该变小。
编辑:我想在没有表格或 javascript 的情况下执行此操作。
在此处的示例中(带有表格,但只是为了说明我的意思):http://jsbin.com/upohag/2/edit,蓝色矩形紧贴在其他两个之间。然而,一个问题是左边的矩形并没有占据它需要的所有空间。左边的矩形应该能够完全展开。
http://jsbin.com/upohag/1/edit
蓝色 div 应该占据绿色和紫色 div 之间的空间。我不知道绿色 div 的宽度,但随着它变大,蓝色的宽度应该变小。
编辑:我想在没有表格或 javascript 的情况下执行此操作。
在此处的示例中(带有表格,但只是为了说明我的意思):http://jsbin.com/upohag/2/edit,蓝色矩形紧贴在其他两个之间。然而,一个问题是左边的矩形并没有占据它需要的所有空间。左边的矩形应该能够完全展开。
您可以使用display: table-cell
来获得正确的自动调整大小行为:
.left{
display:table-cell;
}
.center{
display:table-cell;
}
.right{
display:table-cell;
width: 200px;
}
演示:http: //jsbin.com/upohag/12/edit