1

column-countブロック内のdivにCSSを使用したい。ただし、一部のブラウザ（IE 9など）はをサポートしていないため、ブロック内のdivcolumn-countを設定したいと思います。float:left

しかし、column-countそうすると、Firefoxでは奇妙な動作をします。を使用しない場合はFirefoxで正常に動作しますfloat:leftが、Chromeを使用する場合と使用しない場合は正常に動作しfloatます。添付画像をご覧ください。

ここに画像の説明を入力してください

では、どうすれば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;      
}
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 に答える