16

所以我在一个 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;

}
4

4 回答 4

13

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

.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 结合使用。

于 2013-07-19T23:48:48.713 回答
11

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

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

最后一行确保当您向框添加边框、填充和边距时它也可以工作。

ONLINE DEMO

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

    border-bottom:1px;
于 2013-07-19T23:58:00.563 回答
7

我需要我的解决方案来适应元素数量的变化，以使它们完全响应。

我发现了一个有趣的解决方案。它本质上像一张桌子一样显示。每个元素共享可用宽度，这也适用于图像非常好：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;
}
于 2014-04-18T15:57:07.343 回答
0

我很惊讶没有人建议使用 flex 的 css3 解决方案，即：

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1;
}
于 2021-09-08T12:38:56.387 回答