jquery - 将父 div 缩小为未知数量的 float 子项(css 或 js)

Question

我有一个父 div (display:table)，它包裹着未知数量的 float 子元素。 我现在希望它始终具有子行的宽度。

换句话说:如果父 div 比其子 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>

请调整浏览器的宽度以查看右侧未使用的空白区域。

Answer 1

你可以这样试试: Demo

.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;
}