Question

我试图均匀地分配3 + DIV的变化＆amp;未知的大小。如果<div>标记之间有空格，则解决方案可以完美运行。但如果没有它，它们会聚在一起，这是可以理解的。

HTML

<div class='a'>
  <div class='b'>I</div><div class='b'>Love</div><div class='b'>Pie</div>
</div>
<div class='a'>
  <div class='b'>I</div> <div class='b'>Love</div> <div class='b'>Pie</div>
</div>

CSS

.a {
  text-align: justify;
}
.a::after {
  content:'';
  width: 100%;
  font-size: 0;
  line-height: 0;
  display: inline-block;
}
.b {
  background-color: red;
  display: inline-block;
}

我使用HTML缩小工具折叠标记之间的空白。在大多数情况下，这是完美的，并解决了由html标签之间的无关空格引起的许多其他问题。但在这种情况下，它会导致问题。因此，我希望只使用CSS或仅使用HTML的解决方案，它会在元素之间添加空白。

Answer 1

您可以在容器上使用display: flex; justify-content: space-between;（并删除伪元素）

＆＃13;

.a {
  display: flex;
  justify-content: space-between;
}
.b {
  background-color: red;
}

＆＃13;

<div class='a'>
  <div class='b'>I</div>
  <div class='b'>Love</div>
  <div class='b'>Pie</div>
</div>
<div class='a'>
  <div class='b'>I</div><div class='b'>Love</div><div class='b'>Pie</div>
</div>

＆＃13;

我可以使用CSS在元素之间插入空格吗？

1 个答案: