我想对column-count
块内的 div 使用 CSS。但是,由于某些浏览器(例如 IE 9)不支持column-count
,我想为float:left
块内的 div 设置。
但是,如果我这样做,column-count
会在 Firefox 中以一种奇怪的方式表现。如果我不使用float:left
它,它在 Firefox 中运行良好,而在有和没有 的 Chrome 中运行良好float
。请看附图。
那么,我怎样才能将column-count
andfloat: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;
}