html - 渲染一定数量的 div 后强制内联 div 转到下一行

Question

我有一个容器 div，其中有 X 个较小的容器方 block 。所以像这样:

<div class="container">

    <div class="little-square"></div>
    <div class="little-square"></div>
    <div class="little-square"></div>

</div>

小方 block div 将使用 Handlebars 模板迭代渲染。我想要它做的是每行最多有四个小方 block div。因此，如果我们处理这种情况:

<div class="container">

        <div class="little-square"></div>
        <div class="little-square"></div>
        <div class="little-square"></div>
        <div class="little-square"></div>
        <div class="little-square"></div>
        <div class="little-square"></div>

    </div>

那么预期的结果应该是容器 div 的第一行有四个小方 block ，第二行有两个小方 block 。我正在考虑使用某种 js 代码来实现“如果创建的 div 是第四行，则在该 div 中注入(inject) br 来强制换行”，但不太确定这是否得到很好的考虑。

关于如何做到这一点有什么建议吗？规划这种效果时应该考虑什么？ (这里是CSS菜鸟。感谢您的帮助)。

Answer 1

对此没有简单的解决方案，但您可以使用元素上的 display: inline 和 content: "\00000a", white-space: 来破解它预.

.little-square {
  background: black;
  margin: 10px;
  display: inline;
  padding: 15px 25px;
  line-height: 65px;
}
.little-square:nth-child(4n):after {
  content: "\00000a";
  white-space: pre;
}

<div class="container">
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
</div>