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>

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

如何使this fiddle中的蓝色div占用其父级的剩余可用空间，并在屏幕调整大小时采取行动？

Answer 1

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

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

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

Answer 2

我相信如果您根本不想指定任何像素或百分比宽度并使红色和绿色容器只与其内容一样宽，则需要将它们包装在自己的容器中，名为{{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

<强> Fiddle

修改

愚蠢的是，只要您将.left { float: left; } .left div { float: left; }添加到红色和绿色块中，就显然不需要.left容器，就像@Ennui在评论中所说的那样:)

<强> Updated fiddle

Answer 3

将您的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 4

如果您希望它具有响应能力，请提供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 5

我想这完全取决于你想要的图像。我只是在图像上使用％来表示它们可以根据响应式设计调整大小。 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 6

给容器 display: flex ，每个 div flex: 1 和最后一个 div 给它 flex-shrink: 1; width: 100%

此处的示例 - http://jsfiddle.net/wtsn3uzh/

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

6 个答案: