CSS3列數

Question

我有一個寬度爲100％的div，裏面有大約10張圖片，所有圖片都是不同的寬度和大小。我希望能夠將這些圖像無縫地浮在彼此的周圍，我已經管理了這一點，但它們並沒有跨越屏幕，它們都被調整爲相同的列寬度......無論如何，我可以改變它，所以它們留下他們各自的大小，但填補彼此？

我有這樣的：提前

.images { 
    line-height:0; 
    -webkit-column-count:6; 
    -webkit-column-gap:0px; 
    -moz-column-count:6; 
    -moz-column-gap:0px; 
    column-count:6; 
    column-gap:0px; 
    background:#545454; 
    width:100%; 
    display:inline-block; 
} 

.images img { 
    width:100% !important; 
    height:auto !important; 
} 

謝謝！

Answer 1

column屬性用於在列中設置文本，以便文本流從列的末尾繼續到下一列的開頭。將它們用於圖像不是一個好主意。

根據你暗示的目標是什麼意思，「將這些圖像無縫地浮在彼此的周圍」和「在屏幕上伸展」和「他們保持它們是相應的大小，但是圍繞彼此填充」，你可能會像簡單的做法就是將img元素一個接一個地或使用float: left或將它們放在HTML表格中或用CSS table屬性模擬。