CSS間隔多行內的多個div

我有3個div每行。我想要做的只是在divs之間給一個小空間。所以我增加了一個保證金。這會影響每一行的所有第一個div。CSS間隔多行內的多個div

結果：

[DIV1] -- [DIV2] -- [DIV3] 
-- [DIV4] -- [DIV5] -- [DIV6]

我想什麼：

[DIV1] -- [DIV2] -- [DIV3] 
[DIV4] -- [DIV5] -- [DIV6]

的CSS：

.grids_1{ 
    text-align:center; 
    padding: 2% 0; 
} 
.grid_1{ 
    display: block; 
    margin-left: 3%; 
    float: left; 
} 
.grid_1.bg1{ 
    background: #505050; 
} 
.images_1 { 
    width: 30.333%; 
    position: relative; 
    height:100%; 
    margin-bottom: 2%; 
}

所有的div內的信息從數據庫中檢索。所以我使用PHP和一個while循環來顯示所有的div。

有沒有什麼辦法在它們之間增加空間而不影響每行的第一個div？

來源

2014-12-01 shieldcy

哪個CSS類設置爲什麼元素？你的HTML代碼在哪裏？ – RichardBernards 2014-12-01 15:28:05

最好是如果你可以張貼jsfiddle鏈接 – Rizier123 2014-12-01 15:28:25

我使用了「nth-child（4n）」，這樣每隔四個div就會有一個空白左邊的0％。這是完美的。無論如何謝謝 – shieldcy 2014-12-01 15:32:07

如果有一個已知數量的div（在您的示例中爲3），則可以刪除每:nth-child()的第四個孩子的保證金。

.images_1:nth-child(4n) { 
    margin: 0; 
}

參考：:nth-child

來源

2014-12-01 15:28:37 emmanuel

你拯救了我的生命。非常感謝，這幫助我很多。我不知道我們有這樣的選擇使用CSS。很高興我知道如何解決這些問題。 – shieldcy 2014-12-01 15:31:22

很高興聽到這個，歡迎您！ – emmanuel 2014-12-01 15:31:47

試試這個在你的CSS：

.grid_1:nth-child(3n){ 
     margin-left: 0 !important; 
    }

這將設置利潤率左爲0的.grid_1的元素0,3,6 ...

來源

2014-12-01 15:32:03 cari

謝謝卡里。伊曼紐爾建議同樣的事情，它完美的作品。 – shieldcy 2014-12-01 15:33:24

CSS間隔多行內的多個div

回答

相關問題