對齊div元素

Question

我使用for循環動態創建n個div元素。我希望這些div元素以這種方式對齊，如下所示。

如果偶數div的獲取生成的：

[1] [2]

[3] [4]

[5] [6]

如果奇數的div的產生：

[1] [2]

[3] [4]

[5]

我該如何做到這一點。

Answer 1

如果你的DIV有例如class="x"，您可以浮動它們，並使用這個CSS：（如果你的DIV足夠窄以適應在對寬度這隻適用）

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

.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/雖然要點是您要製作一個帶有顯示器的容器：flexbox（並根據需要更改寬度），然後只要您的子元素的寬度爲50％（或少一點如果您計劃使用邊距/邊框，那麼這個佈局將達到您想要的效果）。

我認爲限制您更改DOM的頻率也是一種很好的做法。例如，如果你知道你要從0到5個div，那麼你應該使用for循環爲所有5個組件創建HTML字符串，然後在一次調用中設置父容器的innerHTML，而不是追加5次。