Html div之间的自动填充-无引导

所以我有一个关于css的问题。是否有可能在“5 divs元素”上不使用填充来获得此设计

我无法在每个div中硬编码style标记中的值，因为它将在foreach循环中使用（但宽度将相同-每行5个div） 我不想使用pseudo（（：：在某个div之后），因为我不知道总共有多少个div

如果我使用：

width:calc（100%/5-*填充数*px）

然后使用

填充：*填充数*px

在5个div上，我的外部div不在正确的位置（不在应该在的线上）

你知道我怎样才能以最好的方式（无引导）实现这一点吗

您可以在CSS3中使用flexbox（此处指南：）

您可以在CSS3中使用flexbox（此处指南：）

你应该使用flexbox。使用
justify content:space-between
获得您想要的结果

可以通过减小宽度来增加div之间的填充


.parent{
显示器：flex；
证明内容：之间的空间；
身高：100%；
}
.孩子{
宽度：19%；
背景颜色：灰色；
高度：100px；
}
.集装箱{
边框：3倍纯黑；
填充：10px 0px 10px 0px；
}
您应该使用flexbox。使用
justify content:space-between
获得您想要的结果

可以通过减小宽度来增加div之间的填充


.parent{
显示器：flex；
证明内容：之间的空间；
身高：100%；
}
.孩子{
宽度：19%；
背景颜色：灰色；
高度：100px；
}
.集装箱{
边框：3倍纯黑；
填充：10px 0px 10px 0px；
}
您应该首先删除
100%
中的填充，然后除以
5
。在您的情况下，元素之间将有4个填充，因此公式应为：

 calc((100% - 4*padding)/5);

例如：


.container{
显示器：flex；
高度：80px；
证明内容：之间的空间；
边框：1px实心；
}
.container>div{
宽度：计算（（100%-4*10px）/5）；
背景：红色；
利润率：10px0；
}
您应该首先删除
100%
中的填充，然后除以
5
。在您的情况下，元素之间将有4个填充，因此公式应为：

 calc((100% - 4*padding)/5);

例如：


.container{
显示器：flex；
高度：80px；
证明内容：之间的空间；
边框：1px实心；
}
.container>div{
宽度：计算（（100%-4*10px）/5）；
背景：红色；
利润率：10px0；
}

您可以使用
display:flex
和
justify content:space-between
容器是
overflow:auto
？您可以使用
display:flex
和
justify content:space-between
容器是
overflow:auto
？