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

我有一个父div（display:table），它包装了未知数量的浮动子对象。 我现在希望它始终具有孩子们行的宽度

换句话说：如果父div比其子div的倍数更宽或更窄，则未使用的空间仍保留在父div中。-我如何避免这种情况

是否可以只使用css，还是需要JS来计算内部行的宽度并将其提供给父div

以下是简化代码：

.wrapper{
边框：1px纯黑；
显示：表格；
宽度：90%；
}
.孩子{
浮动：左；
宽度：100px；
背景色：红色；
利润率：0 10px 10px 0；
}

正文
正文
正文
正文
正文
正文

您可以这样尝试：

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

看看这个演示

---

这假设至少有4个子元素，子元素宽度以%为单位，以强制它们水平占据整个空间。

您能解释一下您想要的图像格式吗？看看这个问题：我写了几乎相同的答案：），但您的回答更好，而且非常有用

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