Firefox中的CSS列数

Question

我想将CSS column-count用于块内的div。但是，由于某些浏览器（例如IE 9）不支持column-count，我想为块内的div设置float:left。

但如果我这样做，column-count将在Firefox中以一种奇怪的方式表现。如果我不使用float:left，它在Firefox中运行正常，而在带有和不带float的Chrome中它可以正常工作。请参阅附图。

那么，我如何一起使用column-count和float:left。

以下是JSFiddle链接：http://jsfiddle.net/V8KV6/1/

这是代码：

HTML：

   <div class="block">
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
   </div>

CSS：

.block{
    width: 300px;
   -webkit-column-count:3;
    -moz-column-count:3;     
}

.column{
    background: orange;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    float: left;      
}

Answer 1

您可以使用IE条件语句：

http://www.quirksmode.org/css/condcom.html

<!--[if IE]>
 According to the conditional comment this is IE
<![endif]-->

Answer 2

如果需要IE支持，则必须使用JavaScript，例如：

http://welcome.totheinter.net/columnizer-jquery-plugin/

.block{
width: 300px;
height:220px;
-webkit-column-count:3;
-moz-column-count:3;
 column-count:3; 

}

.column{
background: orange;
width: 100px;
height: 100px;
margin-bottom:10px;
float: left;      

}

检查小提琴http://jsfiddle.net/V8KV6/21/

Answer 3

http://jsfiddle.net/V8KV6/2/

检查jsfiddle。

.column{
    background: orange;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    display:inline-block;     
}

删除float并添加display:inline-block