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

Question

所以我对CSS有疑问。是否可以在不使用“ 5 divs元素”上的填充的情况下获得此设计？

我无法在每个div的样式标签中对值进行硬编码，因为它将在foreach循环中使用（但宽度将相同-每行5 div） 我不想使用伪（（::某个div之后）），因为我不知道总共会有多少个div。

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

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

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

有什么主意，我该如何以最佳方式[NO bootstrap]来获得它？

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>

Answer 2

您可以在CSS3中使用flexbox（此处的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

Answer 3

您应该首先从100%删除填充，然后除以5。在您的情况下，元素之间将有4个填充，因此公式应为：

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

示例：

.container {
  display: flex;
  height: 80px;
  justify-content:space-between;
  border:1px solid;
}

.container>div {
  width: calc((100% - 4*10px)/5);
  background: red;
  margin:10px 0;
}

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