Html 多个 div 展开以填充容器的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19921484/
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
Multiple divs spread to fill width of container?
提问by user2981824
My setup right now is something like this
我现在的设置是这样的
<div class="container">
<div class="child">AAAAA</div>
<div class="child">BB</div>
<div class="child">CCCCCCCCC</div>
<div class="child">D</div>
</div>
.container {
width: 100%;
border: 1px solid black;
display: inline-block;
}
.child {
border: 1px solid grey;
display: inline-block;
}
I want all divs with class "child" to spread themselves up to fill the entire width of the div with class "container"?
我希望所有具有“子级”类的 div 将自己展开以填充具有“容器”类的 div 的整个宽度？
Probably a pretty easy solution, I'm fairly new to html and css
可能是一个非常简单的解决方案，我对 html 和 css 还很陌生
How can I do this so that no matter what width "container" is the children will spread out evenly?
我怎样才能做到这一点，无论“容器”的宽度是多少，孩子们都会均匀分布？
Thanks!
谢谢！
回答by ajp15243
You're going to need to emulate table layout behavior, as in this answer.
您将需要模拟表格布局行为，如本答案所示。
This does NOTinvolve using actual <table>and children elements! This involves using certain values of the displayproperty, namely tableand table-cell, to emulate the layout behavior of tables. You don't want to use actual table markup for pure layout, as that is semantically incorrect and frowned upon. If your content is actual tabular data that belongs in a table, then it makes perfect sense to use an actual <table>. I'll present the non-table way here since that's likely what you want.
但这不涉及使用实际<table>和儿童元素！这涉及使用display属性的某些值，即tableandtable-cell来模拟表的布局行为。您不想将实际的表标记用于纯布局，因为这在语义上是不正确的并且令人不悦。如果您的内容是属于表格的实际表格数据，那么使用实际的<table>. 我将在这里介绍非表格方式，因为这可能是您想要的。
Your div.containerelement will need the display: table;property to make it behave like <table>. You'll also want the table-layoutrule with the fixedvalue, to make all of your child elements evenly spaced. Your div.childelements will then need display: table-cell;to make them act like table cells. The browser will now automagically compute evenly-spaced layouts for your child elements. Note that you do not need/want a widthrule on your child elements anymore, since the browser computes that. The container element will need a width of some kind, otherwise the table will simply collapse to be only as large as its content. Note that content can also overflow out of the child elements if the content width is more than the computed, evenly-spaced dimensions.
您的div.container元素将需要该display: table;属性使其表现得像<table>. 您还需要table-layout带有fixed值的规则，以使所有子元素均匀分布。div.child然后，您的元素需要display: table-cell;使它们像表格单元格一样工作。浏览器现在将自动为您的子元素计算均匀分布的布局。请注意，您不再需要/不想要width子元素上的规则，因为浏览器会计算该规则。容器元素将需要某种宽度，否则表格将简单地折叠成与其内容一样大。请注意，如果内容宽度大于计算的均匀间隔尺寸，则内容也可能溢出子元素。
The final code is below, and here's a fiddle.
最终代码如下，这是一个fiddle。
HTML:
HTML：
<div class="container">
<div class="child">AAAAA</div>
<div class="child">BB</div>
<div class="child">CCCCCCCCC</div>
<div class="child">D</div>
<div class="child">E</div>
<div class="child">E</div>
<div class="child">E</div>
</div>
CSS:
CSS：
.container {
width: 100%;
border: 1px solid black;
display: table;
table-layout: fixed;
}
.child {
border: 1px solid grey;
display: table-cell;
}
Also, an unrelated note about display: inline-block;. It will render any and all whitespace between inline-block elements (you can see this as spacing between your child elements in your original fiddle). This is normal and following the spec, but is sometimes undesired. You can read about ways to get around it here.
此外，关于display: inline-block;. 它将呈现内联块元素之间的任何和所有空白（您可以将其视为原始小提琴中子元素之间的间距）。这是正常的并遵循规范，但有时是不受欢迎的。您可以在此处阅读有关绕过它的方法。
回答by Arin_nirA
I know this answer is quite old, but I can across a problem like this just now and used CSS' calc function. Take a look at the updated code I made for you.
我知道这个答案很旧，但我现在可以解决这样的问题并使用 CSS 的 calc 函数。看看我为你制作的更新代码。
<div class="container">
<div class="child">AAAAA</div>
<div class="child">BB</div>
<div class="child">CCCCCCCCC</div>
<div class="child">D</div>
</div>
.container {
width: 100%;
border: 1px solid black;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
}
.child {
border: 1px solid grey;
width: calc( 100% / 4); /* 4 is how many .child divs you have */
}
回答by Mesqalito
The use of flexwas actually a great idea. Here you go:
使用flex实际上是一个好主意。干得好：
.container {
width: 100%;
display: flex;
justify-content: space-between;
border: 1px solid black;
}
.child {
flex: 1 1 auto;
border: 1px solid grey;
}<div class="container">
<div class="child">AAAAA</div>
<div class="child">BB</div>
<div class="child">CCCCCCCCC</div>
<div class="child">D</div>
</div>
You may play with justify-contentvalue and with flexvalue for extra customization.
And no need to mess around with tables where you shouldn't.
您可以玩得更justify-content有价值，并flex为额外的定制带来价值。
也无需在不该摆弄的地方摆弄桌子。
P.S. You can dive into the flex easily with this well known article.
PS 您可以通过这篇著名的文章轻松深入了解 flex 。
回答by Sridhar R
回答by Maloke
Just remove the display: inline-block;propertie from child class.
只需display: inline-block;从子类中删除属性。
CSS Divs already have the "abillity" to fill up the whole width.
CSS Divs 已经具有填充整个宽度的“能力”。
