使内联块div占用剩余宽度的100%

Question

我div在另一个里面有3 个街区div.

我想要做的是将它们内联,但前两个div块应根据其内容采用宽度,最后一个div采用剩余空间.

<div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
</div>

我尽量避免使用固定宽度,因为我需要在响应式设计中使用它.

我怎样才能让蓝色div在这个小提琴采取其父其余可用空间,如果调整屏幕大小行动响应？

Answer 1

float: left 红色和绿色和蓝色得到 width: clac(100% - 100px)

.blue {
    width: calc(100% - 100px);
}

http://jsfiddle.net/6kLVn/190/

Answer 2

我相信如果您根本不想指定任何像素或百分比宽度并使红色和绿色容器的宽度与其内容一样宽,则需要将它们包装在自己的容器中,.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: left到你的红色和绿色块,就像@Ennui上面评论中所述:)

更新了小提琴