未知數量的水平行

Question

我希望創建水平浮動的X個不同行。 （見圖）我遇到的問題是我無法設置容器的寬度，因爲我不知道將要添加多少行。

目前，我有這樣的：

HTML：

<div class="container">     
      <div class="row"> 
       Lots of content 
      </div> 
      <div class="row"> 
       Lots of content 
      </div> 
      <div class="row"> 
       Lots of content 
      </div> 
      <div class="row"> 
       Lots of content 
      </div> 
     </div> 

CSS：

.row { 
    float:left; 
    width:23%; 
    margin-left:1%; 
    margin-right:1%; 
    background-color:#252525; 
    height:500px; 
    color:white; 
} 

.container { 
    width:500%; 
} 

需要每一次改變出現了一個新行容器的寬度添加或刪除。有什麼方法可以解決這個問題嗎？

Answer 1

你應該能夠用 「柔性」。

CSS：

.row { 
    flex: 1; 
} 

.container { 
    display: flex; 
} 

見http://www.w3schools.com/cssref/css3_pr_flex.asp 和http://www.w3schools.com/cssref/pr_class_display.asp