使一个内联块级div占据剩余宽度的100%

Question

我有一个包含3个div块的另一个div。

我的想法是将它们放在同一行，但前两个div块应根据其内容占用宽度，而最后一个div块则占用剩余空间。

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

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

如何使这个演示中的蓝色 div 占据其父容器的剩余可用空间，并且在屏幕大小调整时保持响应式？

- Diego

---

你反对使用JavaScript吗？ - Jacques ジャック

你尝试使用百分比了吗？ - Markus Hofmann

将所有内容设置为display: block，并将前两个div设置为向左浮动。其余未浮动的div将占据剩余的空间。 - Ennui

@Jack 如果可能的话，我更喜欢只用 CSS :) - Diego

看起来@Elise回答了你的问题。 - Jacques ジャック

Answer 1

float: left将红色和绿色元素浮动，并使蓝色元素的宽度为calc(100% - 100px)

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

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

- URL87

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;
}

Fiddle

编辑

对不起，我的错。只要把红色和绿色的块添加 float: left 样式，就不需要 .left 容器，就像 @Ennui 在评论中所说的那样 :)

已更新的 Fiddle

- Elise

---

这个解决方案有一个缺陷 - 背景没有浮动，所以如果你给“填充”元素背景，它也会在浮动元素下面 :) 有一个解决方案 - https://dev59.com/2GIj5IYBdhLWcg3whFUI#20180165 ............... (overflow: hidden;) - jave.web

@jave.web 指出得非常好，但是 overflow:hidden 显然不能解决问题。有人知道解决方案吗？http://jsfiddle.net/48nk23e0/ <- 如您所见，黄色背景延伸到了第一个元素下面，能避免这种情况吗？ - Nertan Lucian

@NertanLucian，现在已经是2021年了，只需使用flex :-) https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox 顺便说一下：a）您添加了额外的边框，并且第一个元素有背景-不好的示例b）溢出应用于filler元素，如我所描述的，而不是容器=>我在这里修改了您的代码：http://jsfiddle.net/mLc63ayd/ - jave.web

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/

- Agustin Meriles

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%;}

- feitla

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%;}

- Keith

Answer 6

给容器添加display: flex，每个 div 添加 flex: 1，并且最后一个 div 添加 flex-shrink: 1; width: 100%

参考例子 - http://jsfiddle.net/wtsn3uzh/

- URL87