moz-column在firefox中不起作用

Question

我正在尝试使用以下代码创建一个四列网格.该代码在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>

Answer 1

尝试没有column-fill属性,它应该工作.

或者-moz-column-fill: balance;改为使用.