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 回答