5

次のコードを使用して 4 列のグリッドを作成しようとしています。コードは Chrome で完全に機能していますが、Firefox で列を作成していません。

次のコードはここでライブで確認できます: http://jsfiddle.net/rfTXX/1/

このチュートリアルhttp://css-tricks.com/almanac/properties/c/columns/を確認しましたが、コードは問題ないと思いますが、Firefox ではまだ機能していません。

ほとんどすべてのブラウザで動作するように css を修正する方法を教えてください。

CSS 

#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}

#columns {
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 4;
column-gap: 15px;
column-fill: auto;
}
</style>

HTML

<div id="wrapper">
<div id="columns">

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>


    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

       <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

 </div>
 </div>
4

5 に答える 5

16

column-fillプロパティなしで試してみてください。うまくいくはずです。

または-moz-column-fill: balance;代わりに使用します。

于 2013-09-26T07:55:46.500 に答える
1

安全のために-moz-column-count:"your value"、css にインクルードし、Java スクリプトをインクルードしdocument.getElementById("lstAccessList").style.MozColumnCount = "your value"; てください。

于 2015-11-12T22:23:28.730 に答える
0

-moz-column-rule プロパティは、バージョン 3.5 から Firefox でサポートされています。 http://help.dottoro.com/lcqjxgjq.php

于 2013-09-26T07:58:20.147 に答える
-1

-moz-column-fill:balanceの代わりに使用-moz-column-fill:auto

理由は聞かないでください。

于 2015-06-23T17:04:01.537 に答える