कम्पास संदिग्ध स्तंभ बिना गटर के? - सीएसएस 3, कंपास-सास, संदिग्ध-कंपास

मेरे पास एक ग्रिड है जो पूरी तरह से काम करता है, सिवाय इसके कि मैंएक दूसरे के खिलाफ बट करने के लिए नौसेना में स्तंभ चाहते हैं। यह डेस्कटॉप पर एक 24-कॉलम मैजिक ग्रिड है, और इनमें से प्रत्येक नौ आइटम 4/24 हैं। यदि मैं नकारात्मक मार्जिन की कोशिश करता हूं, तो वे अब नौसेना पट्टी की पूरी चौड़ाई नहीं फैलाते हैं, वे बाईं ओर स्लाइड करते हैं और एक छेद छोड़ देते हैं (अंतिम आइटम एक ओमेगा है)। क्या यह स्तंभों के साथ किया जा सकता है, या क्या मुझे बस अपने नावबार को करने की आवश्यकता है? यहाँ इस स्क्रीनशॉट में मैंने यह स्पष्ट करने के लिए उन सभी को रंगीन किया है:

उत्तर:

एरिक मेयर इतना भयानक है कि उसने अब कुछ ऐसा शामिल किया है जो आपको इस समस्या के साथ मदद करेगा स्टीव - एक नज़र खून बहाना सूसी के नवीनतम संस्करण में।

मुझे विश्वास है कि यह आपकी समस्या के साथ मदद करेगा। यह आपको निम्नलिखित कार्य करने की अनुमति देता है:

.nav-item {
...
@include bleed(1 of 4);
}

के माध्यम से पूरी तरह से पढ़ा है अलग और खून बहाना के साथ अद्यतन करने के लिए

उम्मीद है की वो मदद करदे! और सुसी पर इतना अच्छा काम करने के लिए एरिक को धन्यवाद :)

यदि आपको "टी नीड गटर की जरूरत नहीं है, तो आपको सुसि से मदद की जरूरत नहीं है - गणित सरल है:"

.nav-item {
float: left;
width: percentage(4/24);
}

यह है, लेकिन जैसा कि आपने देखा, वहाँ अतिरिक्त हैउप-पिक्सेल गोलाई के कारण कुछ ब्राउज़रों में जगह बची है। उप-पिक्सेल गोलाई का कोई सरल समाधान नहीं है, सिवाय इसके चारों ओर डिजाइन करने के लिए सीखने के। सुसी अंतिम कॉलम को सही से तैरती है, क्योंकि यह किनारों की तुलना में अंदर की जगह को छिपाना आसान है।

तुंहारे दूसरा विकल्प एक सा हैकी है, और तुम करीब हो (लेकिन नहीं हैपूरे रास्ते)। सभी कॉलमों को फ्लश-लेफ्ट करके, आप गोलाई-त्रुटियों को जोड़े बिना उन्हें वापस जगह में धकेल सकते हैं। इस तरह से आपके पास 1px से अधिक गैप नहीं है:

.nav-item {
float: left;
width: percentage(4/24);

// pull things flush left
margin-right: -100%;

// push things back into place
@for $i from 1 through 6 {
&:nth-child(#{$i}) { margin-left: percentage(($i - 1)*4/24); }
}
}

आप इसके स्थान पर कक्षाओं का उपयोग कर सकते हैं:यदि आप पुराने ब्राउज़रों का समर्थन कर रहे हैं, तो बेशक। यदि आप किसी भी प्रकार के उत्तरदायी डिजाइन कर रहे हैं, तो यह सबसे अच्छा है जो आप संभवतः कर सकते हैं। पूरी तरह से उत्तरदायी डिजाइन के साथ उप-पिक्सेल गोलाई से बचने का कोई तरीका नहीं है। मैं अत्यधिक उस के आसपास डिजाइन करने के लिए सीखने की सलाह देता हूं।