Question

我有一个容器div，X容量较小的容器方块。所以像这样：

<div class="container">

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

</div>

通过使用把手模板迭代渲染小方格div。我想要它做的是每行最多有四个小方形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的第一行中的四个小方块，然后是第二行中的两个小方块。我正在考虑使用某种js代码实现＆＃39;如果创建的div排在第四位，那么在这个div中注入一个br来强制换行，但是不太确定它是否还能很好看着。

有关如何执行此操作的任何建议？在计划这种效果时我应该考虑什么？（css noob here。感谢您的帮助）。

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

强制内联div在渲染了一定数量的div之后转到下一行

1 个答案: