使内联块 div 占据剩余宽度的 100%答案

【问题标题】：Make an inline-block div take 100% of the remaining width使内联块 div 占据剩余宽度的 100%
【发布时间】：2013-07-31 02:43:00
【问题描述】：

我在另一个 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 占用其父级的剩余可用空间并在调整屏幕大小时做出响应？

【问题讨论】：

你反对使用javascript吗？
您尝试过使用百分比吗？
将所有内容设置为 display: block 并将前两个 div 浮动到左侧。剩余的非浮动 div 将占据剩余空间。
@Jack 如果可能的话，我只喜欢 css :)
看起来@Elise 回答了你的问题。

标签： html css responsive-design

【解决方案1】：

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

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

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

【讨论】：

【解决方案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;
}

Fiddle

编辑

愚蠢的我，.left 容器显然不需要，只要您将float: left 添加到您的红色和绿色块中，就像@Ennui 上面在 cmets 中所说的那样 :)

Updated fiddle

【讨论】：

这个解决方案有一个缺陷 - 背景不是浮动的，所以如果你给“填充”元素背景它也将在浮动元素下:) 有一个解决方案 - stackoverflow.com/a/20180165/1835470 .... ...... (overflow: hidden;)
@jave.web 非常有针对性，但溢出：隐藏显然不能解决问题。有谁知道解决方案？ jsfiddle.net/48nk23e0
@NertanLucian 现在是 2021 年，只需使用 flex :-) developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox BTW：在您的 jsfiddle 中-a）您添加了额外的边框，并且您在第一个中有背景-不好的示例 b）溢出对于我所描述的 filler 元素，而不是容器 => 我在此处更改了您的代码：jsfiddle.net/mLc63ayd

【解决方案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/

【讨论】：

【解决方案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%;}

【讨论】：

【解决方案5】：

如果您希望它具有响应性，请提供 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%;}

【讨论】：

【解决方案6】：

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

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

【讨论】：