Html 使内联块 div 占据剩余宽度的 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17955720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make an inline-block div take 100% of the remaining width
提问by Diego
I have 3 divblocks inside another div.
我div在另一个里面有 3个街区div。
What I wanted to do is to put them inline, but the first 2 divblocks should take a width according to their content and the last divtake the remaining space.
我想要做的是将它们内联，但前 2div个块应根据其内容占用宽度，最后一个div占用剩余空间。
<div class="container">
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
</div>
I try to avoid the use of fixed widths because I need to use this in a responsive design.
我尽量避免使用固定宽度，因为我需要在响应式设计中使用它。
How can I make the blue divin this fiddletake the rest available space of its parent and act responsive if the screen is resized?
我怎样才能让蓝色div在这个小提琴采取其父其余可用空间，如果调整屏幕大小行动响应？
采纳答案by Elise
I believe if you don't want to specify any pixel or percentage widths at all and make the red and green containers only as wide as their content, you will need to wrap them inside their own container, named .leftbelow:
我相信如果您根本不想指定任何像素或百分比宽度并且使红色和绿色容器仅与其内容一样宽，则需要将它们包装在自己的容器中，.left如下所示：
<div class="container">
<div class="left">
<div class="red">Red</div>
<div class="green">green</div>
</div>
<div class="blue">blue</div>
</div>
If you now float .leftto the left, and also float .left divto the left, you now no longer need to specify any inline-block elements. The blue container will simply take up as much space as it has available until the end of the .container.
如果您现在.left向左浮动，并且也向左浮动.left div，则现在不再需要指定任何内联块元素。蓝色容器只会占用尽可能多的空间，直到.container.
.left {
float: left;
}
.left div {
float: left;
}
Edit
编辑
Silly me, the .leftcontainer is obviously not needed as long as you just add float: leftto your red and green blocks, just like @Ennui said above in the comments :)
傻我，.left显然不需要容器，只要您添加float: left到您的红色和绿色块中，就像@Ennui 在上面的评论中所说的那样:)
回答by URL87
float: leftthe red and green and the blue get width: clac(100% - 100px)
float: left红色、绿色和蓝色得到 width: clac(100% - 100px)
.blue {
width: calc(100% - 100px);
}
回答by Agustin Meriles
Change your css to this:
将您的 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;}
Tested in Chrome
在 Chrome 中测试
EDIT
编辑
Silly me, this is the forked jsfiddle: http://jsfiddle.net/BWRVk/
傻我，这是分叉的jsfiddle：http: //jsfiddle.net/BWRVk/
回答by feitla
If you want it to be responsive, give the divs% widths.
如果您希望它具有响应性，请提供divs% widths。
http://jsfiddle.net/feitla/6kLVn/6/
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%;}
回答by Keith
I guess it is all based on what you want your images to be. I just used % on the images to show they can be resized according to responsive design. http://jsfiddle.net/6kLVn/7/
我想这完全取决于您想要的图像。我只是在图像上使用 % 来显示它们可以根据响应式设计调整大小。http://jsfiddle.net/6kLVn/7/
HTML
HTML
<div class="container">
<div class="red">Red</div>
<div class="green">green</div>
<div class="blue">blue</div>
</div>
CSS
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%;}
