将父级 div 缩小为未知数量的浮动子级（css 或 js）

Question

我有一个父级 div（显示：table）包裹着未知数量的浮动子级。我现在希望它始终具有子行的宽度。

换句话说：如果父项 div 比其子项的倍数更宽或更窄，未使用的 space 将保留在父项 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>

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

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

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 个子元素，并且子元素的宽度以 % 为单位，以强制它们水平占据整个 space。

将父级 div 缩小为未知数量的浮动子级（css 或 js）

Shrink parent div to unknown number of floating children (css or js)

jquery

css

width

parent

将父级 ​​div 缩小为未知数量的浮动子级（css 或 js）

Shrink parent div to unknown number of floating children (css or js)

jquery

css

width

parent

将父级 div 缩小为未知数量的浮动子级（css 或 js）