html - div 之间的自动填充 - 无 Bootstrap

Question

所以我有一个关于 css 的问题。是否可以在不对“5 div 元素”使用填充的情况下获得此设计？

我不能在每个 div 的样式标签中硬编码值，因为它将在 foreach 循环中使用(但宽度将相同 - 每行 5 个 div) 我不想使用 pseudo((::after a certain div)) 因为我不知道总共会有多少个 div。

如果我使用:width: calc(100%/5 - *number of padding* px)

然后使用padding: *number of padding* px;

在 5 个 div 上，我的外部 div 不在正确的位置(不像他们应该的那样在线)。

知道如何以最好的方式获得它吗？

Answer 1

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

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

.parent {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.child {
  width: 19%;
  background-color: gray;
  height: 100px;
}

.container {
  border: 3px solid black;
  padding: 10px 0px 10px 0px;
}

<div class="container">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>