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列显示不正确

回答

相关问题