5

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

Firefox 从 3.5 版开始支持 -moz-column-rule 属性。 http://help.dottoro.com/lcqjxgjq.php

于 2013-09-26T07:58:20.147 回答
0

删除列填充并添加-moz-columns:4; 它对我有用

于 2017-03-22T10:28:37.957 回答
-1

使用-moz-column-fill:balance代替-moz-column-fill:auto

不要问我为什么，但它对我有用！

于 2015-06-23T17:04:01.537 回答