Css3不正確的列數

Question

我試圖做出響應佈局與列，但在某些情況下，他們的計數正在改變。我已經設置了column-count:3，但是當我有4個div時，它們被定位爲2x2而不是3x1。 當我有7列等時會發生同樣的錯誤。

這裏有一個演示http://jsfiddle.net/BmG44/

這是我的全CSS和HTML

<div id="wrapper"> 
    <div id="content"> 
     <div id="columns"> 
      <div class="news"> 
       <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span> 

      </div> 
      <div class="news"> 
       <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span> 

      </div> 
      <div class="news"> 
       <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span> 

      </div> 
      <div class="news"> 
       <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span> 

      </div> 
     </div> 
    </div> 
</div> 


#content { 

    width: 980px; 
    height:1000px; 
    position:relative; 
    margin: 0 auto 0 auto; 
    background-color:white; 
    max-width: 980px; 


} 


#columns { 
    font-size:1em; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 0.625em; 
    -webkit-column-fill: balance; 
    -moz-column-count: 3; 
    -moz-column-gap: 0.625em; 
    -moz-column-fill: balance; 
    column-count: 3; 
    column-gap: 0.625em; 
    column-fill: balance; 
} 


.news { 
    margin-bottom:0.938em; 
    display: inline-block; 
    background: blue; 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside: avoid; 
    column-break-inside: avoid; 
    padding: 0.625em; 
} 


.newsheader { 
    width:100%; 
    padding-bottom: 0.75em; 
} 

Answer 1

平衡列

這是我在FF，鉻，和Opera中觀察到的行爲：

1 element: 1 0 0 
2 elements: 1 1 0 
3 elements: 1 1 1 

4 elements: 2 2 0 (expected: 2 1 1) 
5 elements: 2 2 1 
6 elements: 2 2 2 

7 elements: 3 3 1 (expected: 3 2 2) 
8 elements: 3 3 2 
9 elements: 3 3 3 

隨着4層7的元件，該瀏覽器是選擇來平衡第一2列而而不是將元素分散到儘可能多的列上。

元素

列的順序依次時，他們充滿平衡。

1 4 7 
2 5 8 
3 6 

...而不是這樣的：：換句話說，如果8個元素被添加到3列，該列將被如下所示填充

1 2 3 
4 5 6 
7 8 

Demo（在FF測試Chrome，Opera）

Answer 2

你只是沒有足夠的內容，使第3列。添加一些更多的新聞元素和第三一個出現：

http://jsfiddle.net/BmG44/10/

的規範已經這樣說column-count：

描述列的最佳數量到其中的 元素的含量將流通。值必須大於0.如果 '列寬'和'列數'具有非自動值，則整數 值將描述最大列數。

http://www.w3.org/TR/css3-multicol/#column-count

沒有什麼的相位，我可以看到指示指定3列意味着你會得到完全相同3列。如果不是獲取2列內容和1列空白，而是獲得2列並且沒有空白空間，那將會很好。

此外，避免中斷的正確屬性名稱是break-inside，儘管一些瀏覽器仍然接受column-break-inside（我認爲Webkit根本不遵守新名稱）。