在一定數量的div渲染後強制內聯div轉到下一行

我有一個X容量的正方形小容器div。所以像這樣：在一定數量的div渲染後強制內聯div轉到下一行

<div class="container"> 

    <div class="little-square"></div> 
    <div class="little-square"></div> 
    <div class="little-square"></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代碼實現'如果創建的div是第四行的，然後在這個div中注入一個br來強制換行'，但是不太確定這是否被很好地考慮過。

有關如何做到這一點的任何建議？規劃這種效應時我應該考慮什麼？（css noob在這裏，謝謝你的幫助）。

來源

2016-10-08 Giancarlo Manuel Guerra Salvá

因此就使用引導CSS類在一行來解決這個問題，paricularly這個問題，引導使用CSS類'COL-LG-3'四個潛水和如果u要到三格在一行中，然後使用'col-lg-4'獲取更多信息，只需訪問此網站http://getbootstrap.com/css/#grid –

有沒有簡單的解決方案，但你可以用display: inline元素和content: "\00000a",white-space: pre破解它。

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

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

來源

2016-10-08 12:35:35

在一定數量的div渲染後強制內聯div轉到下一行

回答

相關問題