CSS列顯示不正確

我有一個div，column-count設置爲3。裏面是一些ul s。我看到右側第4列的開始 - 爲什麼當我指定3列時會出現？CSS列顯示不正確

Screenshot

HTML（小提琴這裏：http://jsfiddle.net/B6zDR/3/）

<!DOCTYPE html> 

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      div 
      { 
       height: 150px; 
       width: 835px; 
       padding: 20px; 
       overflow: hidden; 
       text-overflow: ellipsis; 
       -moz-column-count: 3; 
       -webkit-column-count: 3; 
       column-count: 3; 
       background-color: lightblue; 
      } 

      h2 
      { 
       margin: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <h2>UL #1</h2> 
      <ul> 
       <li>1</li> 
       <li>2</li> 
      </ul> 
      <h2>UL #2</h2> 
      <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
      </ul> 
      <h2>UL #3</h2> 
      <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
      </ul> 
      <h2>UL #4</h2> 
      <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
      </ul> 
      <h2>UL #5</h2> 
      <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
      </ul> 
     </div> 
    </body> 
</html>

來源

2012-12-14 Josh M.

我覺得你的提琴有錯了地方長官的HTML！ – thatidiotguy

哎呀，粘貼到錯誤版本的鏈接！ http://jsfiddle.net/B6zDR/3/ –

什麼瀏覽器，你看到這下？ –

好了，所以這只是一個猜測，所以記住這一點。

由於更改HTML 5 column-count屬性並不會改變Firefox 17中的任何內容，但moz-column-count確實會這樣做，這似乎意味着它仍處於開發階段。這可能是一個錯誤。

來源

2012-12-14 19:31:57 thatidiotguy

是的，同意它可能是一個錯誤。 –

唯一能覆蓋column-count聲明的是height聲明。在您的示例中，您正在限制div元素的height，但指定了3列布局。因此，您的div正試圖強制3列布局，空間不足，並溢出到右側。

退房「測試＃6」上http://www.quirksmode.org/css/multicolumn.html

來源

2012-12-14 19:34:30

嗯，我明白了。如果有一種方法可以說「3列 - 隱藏其餘部分」，那將很酷。這就是我要去的地方......也許是一個省略號。但是我無法做到這一點。 –

CSS列顯示不正確

回答

相關問題