特定 div 内联块后的 CSS 中断

Question

我有这样的 div：

<div id="1" style="display:inline-block">MY DIV 1</div>
<div id="2" style="display:inline-block">MY DIV 2</div>
<div id="3" style="display:inline-block">MY DIV 3</div>
<div id="4" style="display:inline-block">MY DIV 4</div>
<div id="5" style="display:inline-block">MY DIV 5</div>
<div id="6" style="display:inline-block">MY DIV 6</div>

所以有了这个，我有 6 个 div，水平对齐在同一条线上。

我想在第二个 div 之后换行，在第四个 div 之后，我想要：

My DIV 1 My DIV 2
My DIV 3 My DIV 4
My DIV 5 My DIV 6

有任何想法吗 ？

Answer 1

您可以使用纯 css 实现这一点，float: left并在 2n+1 像（或奇数）之后清除浮动：

div {
  float: left;
  margin : 5px;
}
div:nth-child(2n+1) {
  clear: left;
}

<div id="1" style="display:inline-block">MY DIV 1</div>
<div id="2" style="display:inline-block">MY DIV 2</div>
<div id="3" style="display:inline-block">MY DIV 3</div>
<div id="4" style="display:inline-block">MY DIV 4</div>
<div id="5" style="display:inline-block">MY DIV 5</div>
<div id="6" style="display:inline-block">MY DIV 6</div>

上面的代码等价于：

div {
  float: left;
  margin: 5px;
}
div:nth-child(odd) {
  clear: left;
}

<div id="1" style="display:inline-block">MY DIV 1</div>
<div id="2" style="display:inline-block">MY DIV 2</div>
<div id="3" style="display:inline-block">MY DIV 3</div>
<div id="4" style="display:inline-block">MY DIV 4</div>
<div id="5" style="display:inline-block">MY DIV 5</div>
<div id="6" style="display:inline-block">MY DIV 6</div>

参考

:nth-child