Html 使子 div 扩展以填充父 div 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17757086/
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 child divs expand to fill parent div's width
提问by praks5432
So I have three divs inside one div.
所以我在一个div中有三个div。
<div class="parent">
<div class="child> Text</div>
<div class="child">Text</div>
<div class="child">Text</div>
</div>
I want the child divs to fill up the width of the parent(the combined width of the children should be the parent). However, this is not happening, I'm falling short. I think this is because the child divs are setting width based on their content.
我希望子 div 填充父的宽度（子的组合宽度应该是父）。然而，这并没有发生，我没有达到。我认为这是因为子 div 根据其内容设置宽度。
How do I achieve what I want?
我如何实现我想要的？
CSS-
CSS-
.child {
background: white;
color: #a7a9ac;
cursor: pointer;
font-size: 15px;
border-right: 1px;
border-top: 0;
border-bottom: 0;
border-left: 0;
border-style: solid;
border-color: @faded-grey;
padding-right: 10px;
margin: 0 auto;
height: 100%;
}
.parent {
border-top: 1px;
border-left: 0;
border-bottom: 1;
border-style: solid;
border-color: @faded-grey;
border-right: 0;
width: 100%;
margin-right: 0px;
height: 80px;
}
采纳答案by Jimmy Breck-McKye
If you know there will always be three children, you can simply use:
如果你知道总会有三个孩子，你可以简单地使用：
.parent > .child {
float: left;
width: 33%;
}
.parent {
overflow: auto; /*or whatever float wrapping technique you want to use*/
}
If you do not know how many children there are, you will need to use CSS tables, flexbox, or perhaps combine inline-blocks with text-align: justify.
如果您不知道有多少个孩子，您将需要使用 CSS 表格、flexbox，或者将 inline-blocks 与 text-align: justify 结合起来。
回答by Jimmy Breck-McKye
You can add these three properties to the .childCSS rule:
您可以将这三个属性添加到.childCSS 规则中：
width:33%;
float:left;
box-sizing: border-box;
The last line makes sure it will also work when you add borders, padding and margin to the boxes.
最后一行确保在向框添加边框、填充和边距时它也能正常工作。
Ps: not directly related but there is also an error in the border-bottom for parent, corrected in fiddle above. When you use non-0 value you need to specify unit:
Ps：没有直接关系，但父母的边框底部也有错误，在上面的小提琴中更正。当您使用非 0 值时，您需要指定单位：
border-bottom:1px;
回答by Steven Linn
I needed for my solution to accommodate a variance in the number of elements for them to be completely responsive.
我需要让我的解决方案适应元素数量的差异，以便它们完全响应。
I discovered an interesting solution to this. It essentially displays like a table. Every element shares available width, and this also works for images very well: http://jsfiddle.net/8Qa72/6/
我发现了一个有趣的解决方案。它本质上像一张桌子一样显示。每个元素共享可用宽度，这也适用于图像非常好：http: //jsfiddle.net/8Qa72/6/
.table {
display: table;
width: 400px;
}
.table .row {
display: table-row;
}
.table .row .cell {
display: table-cell;
padding: 5px;
}
.table .row .cell .contents {
background: #444;
width: 100%;
height: 75px;
}
