ग्रिड सिस्टम और इनलाइन-ब्लॉक स्पेसिंग

Question

मैंने अभी देखा है http://csswizardry.com/2013/02/introducing-csswizardry-grids/ और इसके लिए डेमो (http://csswizardry.com/csswizardry-grids/)। मुझे लगता है कि यह सीएसएस में ग्रिड को हल करने के लिए एक बहुत अच्छा तरीका है। इसलिए मैंने स्रोत कोड को देखने के लिए जांच की, यह कैसे किया गया और मैंने एक छोटी सी चीज़ देखी, जिसे मैं वास्तव में नहीं समझ सकता कि यह कैसे किया गया था।

यह ग्रिड सिस्टम फ्लोट्स का उपयोग नहीं कर रहा है लेकिन इनलाइन-ब्लॉक तत्व, जो एक अच्छी बात है। लेकिन हर बार जब मैं प्रतिशत चौड़ाई कॉलम/ग्रिड इत्यादि के लिए इनलाइन ब्लॉक का उपयोग कर रहा हूं, तो मेरे पास यह इनलाइन ब्लॉक स्पेसिंग है। मुझे पता है कि इस दूरी से छुटकारा पाने के लिए कई तरीके हैं (अधिकतर केवल आपके एचटीएमएल में बदलाव): http://css-tricks.com/fighting-the-space-between-inline-block-elements/

लेकिन ग्रिड सिस्टम में मैंने आपको दिखाया कि इनमें से कोई भी फिक्स नहीं है (जहां तक ​​मैं देख सकता हूं) और अभी भी यदि आप स्रोत कोड की जांच करते हैं तो कोई इनलाइन-ब्लॉक स्पेसिंग नहीं है। बस आप समस्या मैं ज्यादातर यहाँ दिखाने के लिए एक त्वरित बेला है: http://jsfiddle.net/nN8mV/

एचटीएमएल

<p>Floating columns (width 33.3%)</p> 
<div class="grid cf"> 
    <div class="grid__item">Test</div> 
    <div class="grid__item">Test</div> 
    <div class="grid__item">Test</div> 
</div> 
<p>Inline Block columns (width 33.3%)</p> 
<div class="grid grid--inlineblock"> 
    <div class="grid__item">Test</div> 
    <div class="grid__item">Test</div> 
    <div class="grid__item">Test</div> 
</div> 

सीएसएस

.grid { 
    margin-bottom: 20px; 
} 
    .grid__item { 
     float: left; 
     width: 33.3%; 
     background: red; 
    } 
    .grid--inlineblock .grid__item { 
     float: none; 
     display: inline-block; 
    } 

आप शायद जानते हैं कि, लेकिन 33.3% चौड़ाई काम नहीं करता है , इस दूरी के कारण। ग्रिड सिस्टम में यह समस्या प्रतीत नहीं होती है, हालांकि यह "डिस्प्ले: इनलाइन-ब्लॉक" का भी उपयोग कर रहा है। तो मेरा सवाल: सीएसएस जादूगर ने इस समस्या को कैसे हल किया? मैं इसे समझ नहीं सकता और HTML को बदल नहीं सकता (ऊपर सीएसएस ट्रिक्स लिंक देखें) वास्तव में सीएमएस उत्पन्न सामग्री या अन्य सामान की वजह से वास्तव में काम नहीं करता है, जहां आप अपने एचटीएमएल को अनुकूलित नहीं कर सकते हैं।

आपकी मदद के लिए अग्रिम धन्यवाद।

Csswizardry से

Answer 1

डेमो आप लिंक का उपयोग करता टिप्पणी एचटीएमएल हैक:

<div class="grid__item"></div><!-- 
--><div class="grid__item"></div> 

उनके डेमो स्रोत की जाँच करें।

भी अद्यतन अपने jsfiddle

Answer 2

आप अपने HTML को बदल नहीं सकते हैं, तो आप कंटेनर font-size: 0 देना और स्तंभों में font-size रीसेट या स्तंभों नकारात्मक हाशिए देने के लिए (परेशानी हो सकता है) होगा।

अधिक विवरण: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

आप निम्न कर सकता है:

.grid--inlineblock { 
    word-spacing: -4px; 
} 

और बच्चे मद पर रीसेट शब्द-रिक्ति

.grid--inlineblock .grid__item { 
    float: none; 
    display: inline-block; 
    word-spacing: normal; 
} 

आप चेकआउट कर सकते हैं this बेवकूफ।

मुझे यकीन है कि यह सबसे अच्छी तकनीक है लेकिन ऐसा लगता है कि यह काम करता है।

Answer 4

फ्लेक्सबॉक्स आजकल इस समस्या को हल करता है।

इसके बजाय आप निम्नलिखित कर सकता है:

.grid--inlineblock .grid__item { 
     display: flex; 
} 

और वह रिक्ति मुद्दों को हल करना चाहिए।