Css和html 2 div在一行然后走下一行

Question

您好我正在制作一个页面，我需要在同一行上有2个div然后自动它将转到新行并在那里制作2个div并且一直打开。

Image about how it looks now

我需要在同一行上的两个方框然后它应该在下一行开始自动，然后在第2行有2个方框它到第3行

Answer 1

您可以使用CSS's nth-child pseudo-class selector。

首先，将div元素设置为float以使它们彼此并排：

div {
    float: left;
}

现在引入一个nth-child选择器，让其他div清除前一个浮点数：

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

JSFiddle demo

Answer 2

你可以设置所有显示的div：inline-block，然后放一个＆lt; br＆gt;每当你想要一个新行时都标记。

或者，你可以设置所有显示的div：inline-block并将它们放在一个容器中，该容器有足够的空间容纳两个div，但没有足够的空间容纳三个div。它们应该自动溢出到下一行，因此您不需要添加中断标记。