使子 div 扩展以填充父 div 的宽度

Question

我在一个 div 中有三个 div。

 <div class="parent">
<div class="child"> Text</div>
<div class="child">Text</div>
<div class="child">Text</div>
</div>

我希望子 div 填满父级的宽度（子级的组合宽度应该是父级）。但是，这没有发生，我做不到。我认为这是因为子 div 正在根据其内容设置宽度。

我如何实现我想要的？

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;

}

原文由 praks5432 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你知道总会有三个孩子，你可以简单地使用：

 .parent > .child {
    float: left;
    width: 33%;
}

.parent {
    overflow: auto; /*or whatever float wrapping technique you want to use*/
}

如果您不知道有多少孩子，您将需要使用 CSS 表格、flexbox，或者将 inline-blocks 与 text-align: justify 结合使用。

原文由 Jimmy Breck-McKye 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以将这三个属性添加到 .child CSS 规则：

 width:33%;
float:left;
box-sizing: border-box;

最后一行确保它在您向框添加边框、填充和边距时也能正常工作。

在线演示

Ps：没有直接关系，但父级的 border-bottom 也有错误，已在上面的小提琴中更正。当您使用非 0 值时，您需要指定单位：

     border-bottom:1px;

原文由 user1693593 发布，翻译遵循 CC BY-SA 3.0 许可协议