5
में काम नहीं कर रहा है मैं निम्नलिखित कोड का उपयोग कर चार कॉलम ग्रिड बनाने की कोशिश कर रहा हूं। कोड क्रोम में पूरी तरह से काम कर रहा है लेकिन यह फ़ायरफ़ॉक्स में कॉलम नहीं बना रहा है।moz-column फ़ायरफ़ॉक्स
आप नीचे दिए गए कोड की जांच कर सकते यहां मौजूद रहती है: http://jsfiddle.net/rfTXX/1/
मैं इस ट्यूटोरियल http://css-tricks.com/almanac/properties/c/columns/ जाँच की है और मुझे लगता है कि मेरी कोड ठीक हैं, लेकिन अभी भी अपने फ़ायरफ़ॉक्स में काम नहीं कर।
क्या आप कृपया मुझे बता सकते हैं कि सीएसएस को कैसे ठीक किया जाए ताकि यह लगभग हर ब्राउज़र में काम करे?
सीएसएस
#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>
एचटीएमएल
<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>
धन्यवाद अपने काम के काम है। मुझे इसे काम करने के लिए '-मोज़-कॉलम-फिल: ऑटो;' को हटाना पड़ा। लेकिन '-मोज़-कॉलम भरने के बिना: ऑटो;' यह प्रत्येक ग्रिड के बीच कोई जगह नहीं बनाता है। –
'-मोज़-कॉलम-फिल: बैलेंस;' के बजाय '-मोज़-कॉलम-फिल: ऑटो; 'इसे फ़ायरफ़ॉक्स पर काम करने के लिए उपयोग करें। इससे मेरा काम बनता है ! – SauriolJf