Question

我使用for循环动态创建n个div元素。我希望这些div元素以这种方式对齐，如下所示。

如果生成偶数个div：

[1] [2]

[3] [4]

[5] [6]

如果生成奇数个div：

[1] [2]

[3] [4]

[5]

我怎样才能做到这一点。

Answer 1

如果你的DIV有例如class="x"，你可以浮动它们并使用这个CSS：

.x {
  float: left;
}
.x:nth-child(odd) {
  clear: left;
}

（仅当您的DIV足够窄以成对地适应宽度时才有效）

.x {
  float: left;
  width: 200px;
  height: 160px;
  background: #cae;
  margin: 3px;
}

.x:nth-child(odd) {
  clear: left;
}

<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>

Answer 2

我建议使用flexbox。您可以在这里查看备忘单：https://css-tricks.com/snippets/css/a-guide-to-flexbox/虽然要点是您使用display：flexbox制作容器（并将宽度更改为您喜欢的宽度），然后只要您的子元素具有宽度：50％（如果您计划有边距/边框，或者略低于50％，布局将达到您想要的效果。

我认为限制更改DOM的频率也是一种很好的做法。例如，如果您知道自己从0到5个div，那么您应该使用for循环为所有5个组件创建HTML字符串，然后在一次调用中设置父容器的innerHTML，而不是追加5次。

对齐div元素

2 个答案: