如何創建一個佈局，其中的元素從左到右浮動從上到下

我在CSS和HTML中編寫了一個佈局，我希望從左到右呈現預期的佈局，像這樣從上到下：如何創建一個佈局，其中的元素從左到右浮動從上到下

每個盒具有不同的高度，但相同的寬度。我不知道有多少個盒子，它可以從2到20不等。我試過float：left，但是根據盒子的大小，你會得到空的空間。我也嘗試過CSS3中的列，但它的行爲非常隨機，無論是瀏覽器類型，框的數量還是框的大小。有誰知道一個聰明的技巧，使它看起來像這樣，並最好不使用Javascript。

來源

2016-12-02 Numm3n

你有沒有在每個元素後面使用'clear：both'來使用'float：left'後元素不會丟失高度？ –

是的，不幸的是，你仍然會在盒子之間獲得很多空間。 – Numm3n

請谷歌「砌體佈局CSS」或更好的「砌體佈局柔性箱」。這將是非常有幫助的。 –

砌體做到這一點：http://masonry.desandro.com/ - 這是用JS雖然

來源

2016-12-02 12:34:26

你可以用純CSS實現這一目標。使用column-width屬性和間距的column-gap組合和padding

HTML

<section> 
    <img src="path" /> 
    <img src="path" /> 
    <img src="path" /> 
</section>

CSS

section{ 
    column-width: 300px; 
    column-gap: 5px; 
    padding: 5px; 
} 

section img{ 
    width: 100%; 
}

演示

Pen

來源

2016-12-02 13:56:44 SvenL

如何創建一個佈局，其中的元素從左到右浮動從上到下

回答

相關問題