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

Question

我在另一个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占用其父级的剩余可用空间，并在屏幕大小调整后采取相应行动？

Answer 1

我相信，如果你不想指定所有任何像素或百分比宽度，使红，绿装只一样宽的内容，您需要将它们包装在自己的容器内，名称为.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; 
} 

Fiddle

编辑

我傻，显然不是因为你只需要添加float: left到你的红色和绿色街区，就像@Ennui说需要只要在.left容器以上在评论中:)

Updated fiddle

Answer 2

你的CSS改成这样：

.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;} 

.container div {height: 20px;} 

.red{border: 2px solid red; display: block; float: left;} 

.green{border: 2px solid green; display: block; float: left;} 

.blue{border: 2px solid blue;} 

测试在Chrome

编辑

我傻，这是分叉的jsfiddle：http://jsfiddle.net/BWRVk/

Answer 3

如果你想让它做出反应，给予divs％widths。

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

.container div {height: 20px;} 

.red{border: 2px solid red;width:10%;display:inline;} 

.green{border: 2px solid green;width:10%; display: inline;} 

.blue{border: 2px solid blue;display:inline-block;width:80%;} 

Answer 4

我想这是所有基于你希望你的图片是什么。我只是在图像上使用％来显示它们可以根据响应式设计调整大小。 http://jsfiddle.net/6kLVn/7/

HTML

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

CSS

.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;} 

.container div {height: 20px; display: inline-block; padding:0px; margin:0px;} 

.red{border: 2px solid red; width:31%; } 

.green{border: 2px solid green;width:31%;} 

.blue{border: 2px solid blue;width:31%;} 

Answer 5

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

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

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