1

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

但是，如果我这样做，column-count会在 Firefox 中以一种奇怪的方式表现。如果我不使用float:left它，它在 Firefox 中运行良好，而在有和没有 的 Chrome 中运行良好float。请看附图。

在此处输入图像描述

那么，我怎样才能将column-countandfloat: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;      
}
4

3 回答 3

4

您可以使用 IE 条件语句：

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

<!--[if IE]>
 According to the conditional comment this is IE
<![endif]-->
于 2012-09-10T11:39:32.097 回答
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/

于 2012-09-10T11:41:01.567 回答
0

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

检查jsfiddle。

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

删除float并添加display:inline-block

于 2012-09-10T11:29:06.733 回答