CSS3列布局的列

Question

我有一組圖像，我想在以下模式來顯示的動態數：

[1] [4] [7] [10] [13] 
[2] [5] [8] [11] ... 
[3] [6] [9] [12] 

我知道我可以隨時手動組3點的圖象分成一類似div.column或東西，但我想用盡可能簡單的HTML來實現這種佈局。圖像是225x150。

---

目前，我有以下的HTML：

<div class='album'> 
    <img src='img/01.jpg' /> 
    <img src='img/01.jpg' /> 
    ... 
</div> 

這是我的樣式表：

.album { 
    background: #faa; 
    display: block; 
    -webkit-column-count:2; 
    -webkit-column-gap: 10px; 
    height: 450px; 
    width: 460px; 

} 
.album img { 
    display: block; 
    width: 100%; 
} 

---

Chapter 8.2的規格介紹，如果我指定的高度和內容不適合，根據需要創建更多的列，這基本上就是我想要的。

正如您所看到的，我爲.album指定了背景顏色。這隻包括前兩列，因爲我將寬度設置爲460px。但是，我確實需要一個具有相冊內容的確切大小/寬度的元素，即包含具有該確切大小的相冊的元素。

我嘗試過的所有可能性似乎都不起作用。 （100%,auto，與overflow一起玩）

有沒有人有一個想法，我可以如何創建這樣的我的相冊包裝元素？

Answer 1

因爲使用內聯元素中的列（內嵌塊等）會導致某些瀏覽器錯誤地計算元素的寬度，所以可能會因爲此目的而使用Flexbox。

http://codepen.io/cimmanon/pen/vuxjF

.album { 
    background: #faa; 
    height: 480px; 
    padding: 5px; 
    display: -ms-inline-flexbox; 
    display: -webkit-inline-flex; 
    -webkit-flex-flow: column wrap; 
    -ms-flex-flow: column wrap; 
    flex-flow: column wrap; 
    -ms-flex-align: start; 
    -webkit-align-items: flex-start; 
    align-items: flex-start; 
} 
@supports (flex-wrap: wrap) { 
    .album { 
    display: inline-flex; 
    } 
} 

.album img { 
    margin: 5px; 
} 

Answer 2

與之相似的事情在With column-count, can you dynamically change from 3 to 2 columns if resolution smaller?還問。 CSS columns回答可能有好處檢查？ （列是列寬+列數的shorthad，參見the spec & codepen demo）。

請注意，瀏覽器支持各不相同&當前需要-moz/-webkit前綴（http://caniuse.com/#search=column）。