我在另一个div里面有3个div块.
我想做的是将它们放在一起,但是前2个div块应该根据其内容宽度,最后一个div占用剩余的空间.
<div class="container">
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
</div>
我试图避免使用固定宽度,因为我需要在响应式设计中使用它.
如何使this fiddle的蓝色div可以占用其父级的剩余空间,并且如果屏幕调整大小,则会采取响应措施？
解决方法
我相信如果您不想指定任何像素或百分比宽度,并使红色和绿色容器只能与其内容一样宽,您将需要将它们包装在自己的容器中,名为.left,如下所示：
<div class="container">
<div class="left">
<div class="red">Red</div>
<div class="green">green</div>
</div>
<div class="blue">blue</div>
</div>
如果现在在左边浮动.left,并将左侧的.left div浮动,则现在不再需要指定任何内嵌块元素.蓝色的容器将占用尽可能多的空间,直到.container的结尾.
.left {
float: left;
}
.left div {
float: left;
}
编辑
愚蠢的我,.left容器显然是不需要,只要你只需要添加float：留下你的红色和绿色的块,就像@Ennui上面说的:)
