CSS 用内容宽度扩展容器 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6115353/
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
Expand container div with content width
提问by Andre
I have the following structure in my application:
我的应用程序中有以下结构：
<div id="container">
<div id="child_container">
<div class="child"></div>
<div class="child"></div>
...
<div class="child"></div>
</div>
</div>
Each child div has a known fixed width, but the application allows more of them to be inserted in the child_container div.
每个子 div 都有一个已知的固定宽度，但应用程序允许在 child_container div 中插入更多的子 div。
What I'm trying to do is to have the container div expand horizontally when needed, given the total width of the child container.
考虑到子容器的总宽度，我想要做的是在需要时让容器 div 水平扩展。
This is what happens currently:
这是目前发生的情况：
+------ container -------+
+--- child_container ----+
| child1 child2 child3 |
| child4 |
+------------------------+
If I set the child_container div width to a fixed value, I can get it to expand horizontally past the container div, which works despite being a bit ugly:
如果我将 child_container div 宽度设置为固定值，我可以让它水平扩展超过容器 div，尽管有点难看，但它仍然有效：
+------ container -------+
+------ child_container -+----+
| child1 child2 child3 child4 |
+------------------------+----+
However, that requires recalculating it whenever a new child is added.
但是，这需要在添加新子项时重新计算它。
Is there a way to do this without using fixed widths for child container, in a way such that the end result is
有没有办法在不为子容器使用固定宽度的情况下做到这一点，最终结果是
+--------- container ---------+
+------ child_container ------+
| child1 child2 child3 child4 |
+-----------------------------+
Thanks.
谢谢。
采纳答案by wajiw
Something like this should work:
这样的事情应该工作：
#container, #child_container, .child {
position: relative;
float: left;
}
回答by Nate Barr
Even easier:
更简单：
<style>
#container{ display: inline-block; }
</style>
回答by user2364729
The parent container won't grow when a child element is added.
添加子元素时，父容器不会增长。
+------ container -------+
+--- child_container ----+
| child1 child2 child3 |
| child4 |
+------------------------+
but we can avoid the rendering of new one on the next line by using css3 flex box. The sample is placed the below mentioned path
但是我们可以通过使用 css3 flex box 来避免在下一行渲染新的。样本放置在下面提到的路径中
.products{
display: -webkit-flex;
-webkit-flex-flow: row;
/*-webkit-justify-content: center;*/
}
.products > div{
padding: 0 4em;
}
The result will look like this:
结果将如下所示：
+--- child_container ----+|
| child1 child2 child3 ch|ild4 child5
| |
+------------------------+
回答by AlbertVo
If you float everything left including the containing divs, it will work.
如果您浮动包括包含 div 在内的所有内容，它将起作用。
回答by Juuro
The modern solution today would be
今天的现代解决方案是
#child_container {
display: flex;
}
Because flex-wrapis by default set to
因为flex-wrap默认设置为
flex-wrap: nowrap;
This simple solution works like a charm. And by now also in all relevant browsers.
这个简单的解决方案就像一个魅力。并且现在也在所有相关浏览器中。
回答by matmancini
just set the width of the parent to 120% and done =)
只需将父级的宽度设置为 120% 并完成 =)
