CSS列數 - 更改訂單

Question

我想在這裏更改列的順序：

#container { 
 
    position: relative; 
 
    width: 600px; 
 
} 
 

 
#column-wrapper { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 20px; 
 
    -moz-column-gap: 20px; 
 
    column-gap: 20px; 
 
} 
 

 
#column-wrapper .column { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding: 20px 0; 
 
    margin-bottom: 20px; 
 
    background-color: green; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
}

<div id="container"> 
 

 
    <div id="column-wrapper"> 
 
     
 
     <div class="column"> 
 
      <span>1</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>2</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>3</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>4</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>5</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>6</span> 
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>

結果應該是這樣的：

有誰知道一個簡單的解決方案？

Answer 1

爲什麼在需要基於行的訂單時使用列？看起來像the flex model的工作。不改變你的HTML你可以這樣做：

#container { 
 
    position: relative; 
 
    width: 600px; 
 
} 
 

 
#column-wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap 
 
} 
 

 
#column-wrapper .column { 
 
    display: inline-block; 
 
    width: calc(30% - 20px); 
 
    padding: 20px 0; 
 
    margin: 20px; 
 
    background-color: green; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
}

<div id="container"> 
 

 
    <div id="column-wrapper"> 
 
     
 
     <div class="column"> 
 
      <span>1</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>2</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>3</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>4</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>5</span> 
 
     </div> 
 
     
 
     <div class="column"> 
 
      <span>6</span> 
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>

Answer 2

你並不需要使用column展現在CSS。改爲使用float，這是自然的文檔流程。

.column {float: left; width: 140px;} 
.column:nth-child(3n+2) {margin: 0 20px;} 
.column:nth-child(3) ~ .column {margin-top: 20px;} 

http://jsfiddle.net/70nk1a1n/1/