css3列錯誤的順序

Question

我正在使用css3列，以便每行創建3列，如pinterest。

但它似乎這樣排序：

1 | 4 | 7

2 | 5 | 8

3 | 6 | 9

而不是：

1 | 2 | 3

4 | 5 | 6

7 | 8 | 9

這裏是我寫的：

.list .remains { 
-webkit-column-count: 2; /* Chrome, Safari, Opera */ 
-moz-column-count: 2; /* Firefox */ 
column-count: 2; 

-webkit-column-gap: 0; /* Chrome, Safari, Opera */ 
-moz-column-gap: 0; /* Firefox */ 
column-gap: 0; 

}

http://jsfiddle.net/uyv70h05/

是它的自然行爲？我可以修復它嗎？

感謝

Answer 1

也就是說列，這是垂直的預期行爲。看起來您需要水平行，可以通過在列表{1,2,3 ...}中的所有單個元素上設置float:left或display:inline-block來完成。

像這樣：http://jsfiddle.net/uyv70h05/1/

如果這些元素是不一樣的高度，像Pinterest上，有沒有辦法，我發現複製，如果沒有使用JavaScript。有幾個庫可以達到這個目的，砌體是我聽過最多的一個：http://masonry.desandro.com/

Answer 2

我不是CSS3的專家，但我認爲自然的行爲是這樣...一個快速的解決辦法是族元素的DIV複製並粘貼此代碼它可能工作...`

<div class="list"> 

    <div class="remains"> 
     <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>1</h3> 
     <p>What happened</p> 
     </a> 
     <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>2</h3> 
     <p>Hey How are you doing? you went missing lately... </p> 
     </a> 
    <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>3</h3> 
     <p>Dude... it was AWESOME!</p> 
     </a> 
    </div> 
     <div class="remains"> 
    <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>4</h3> 
     <p>Please let it be fine...</p> 
     </a> 
    <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>5</h3> 
     <p>SHIT! I thing I got it wrong!!! ...</p> 
     </a> 
    <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>6</h3> 
     <p>ONE TWO ONE TWO ... SOUND CHECK.. Let's write something so long, it will go two rows!</p> 
     </a> 
      </div> 
     <div class="remains"> 
    <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>7</h3> 
     <p>Seems like we have got some big issue around here ...</p> 
     </a> 
    <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>8</h3> 
     <p>NIGHTS IN WHITE SATIN.. NEVER REACHING ...</p> 
     </a> 
    <a class="item box" href="#"> 
     <img src="./img/usericon.png" alt="" class="user-icon" /> 
     <h3>9</h3> 
     <p>NIGHTS IN WHITE SATIN.. NEVER REACHING ...</p> 
     </a> 

    </div> 
</div> 

`