收缩父级div以适应未知数量的浮动子元素（使用css或js）

Question

我有一个包含未知数量浮动子元素的父级div（display:table）。现在我希望它始终具有子行的宽度。

换句话说：如果父级div比其子元素的倍数更宽或更窄，则未使用的空间将留在父级div内。 - 我该如何避免这种情况？

这只能通过CSS实现吗？还是需要使用JS计算内部行的宽度并将其赋给父级div？

以下是简化的代码：

.wrapper {
    border: 1px solid black;
    display:table;
    width:90%;
}
.child {
    float:left;
    width: 100px;
    background-color:red;
    margin: 0 10px 10px 0;
}

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

请调整您的浏览器宽度，以查看右侧未使用的白色空间。

- user2113177

---

你能否解释一下你想要的具体内容，例如图片？ - G.L.P

看看这个问题：当浮点数过长换行时为什么会保留“幽灵”空格？ - Praxis Ashelin

Answer 1

你可以尝试这样写：演示。

.wrapper {
    border: 1px solid black;
    width:auto;
    overflow:auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.child {
    display:inline-block;
    width: 15%;
    background-color:red;
    margin: 0 10px 10px 0;
    order: 1px solid #333;
    position: relative;
}

- G.L.P

---

我也差不多写了同样的答案 :) 但你的更好。 - Lafontein

很好的且非常有用的答案。 - M.chaudhry

Answer 2

   .wrapper {
    border: 1px solid black;
    display:table;
    width: 90%;
    margin-bottom: -10px;
}
.child {
    box-sizing: border-box;
    float:left;
    width: 24.25%;
    background-color:red;
    margin: 1% 1% 0 0;  
}
.child:nth-child(-n+4){
    margin-top: 0;
}

.child:nth-child(4n) {
    margin-right: 0px;
}

看看这个演示 http://jsfiddle.net/wtxafjw0/1/

这假设至少有4个子元素，且子元素的宽度以百分比表示，以强制它们水平占据整个空间。

- naman kalkhuria