शुभ दिन प्रिय हरजितेली। आज तक, किसी पृष्ठ के लिए मार्कअप का निर्माण लगभग स्वचालित नहीं है। हम
float या
inline-block (
अधिक ) का उपयोग करके मार्कअप करते हैं। इसलिए मैं आपके साथ कुछ बेहतरीन विचार साझा करना चाहता हूं - जस्टीफाइड ग्रिड फ्रेमफॉर्क।
समस्या
यदि हम
float पर लेआउट के बारे में बात करते हैं, तो हमें तत्व को केंद्रित करने की समस्या का सामना करना पड़ता है और हमें सावधानीपूर्वक चौड़ाई और इंडेंटेशन के सभी मूल्यों का संकेत देना होगा। यह समस्या निश्चित रूप से मौजूदा ग्रिड फ्रेमवर्क (उदाहरण के लिए,
960.gs ) द्वारा हल की गई है। लेकिन यह पता चला है कि मार्कअप सममित रूप से सही नहीं है और डेवलपर्स को लगातार .clearfix का उपयोग करना पड़ता है। साथ ही, आंशिक पिक्सेल के कारण समस्याएं उत्पन्न हो सकती हैं। यदि हम
inline-block बारे में बात करते हैं, तो असुविधा इस तथ्य के कारण दिखाई देती है कि इस मान वाले तत्व आधार रेखा पर संरेखित किए जाते हैं, और शीर्ष किनारे पर नहीं। और अगर पृष्ठ पर कई इनलाइन-ब्लॉक हैं, जिनमें से प्रत्येक नई लाइन पर स्थित है, तो उनके बीच कुछ अंतराल होंगे। कोई भी स्थान आपके लेआउट को प्रभावित करेगा। एक समाधान है -
CSS ग्रिड लेआउट या
फ्लेक्सिबल बॉक्स लेआउट , लेकिन अधिकांश ब्राउज़र पर ये समाधान समर्थित नहीं हैं।
ग्रिड को औचित्य दें
मैं एक छोटा सा उदाहरण दूंगा:
<div class="main"> <h1>Image Gallery</h1> <div class="image"></div> <div class="image"></div> <div class="image"></div> </div>
.main { text-align: justify; font-size: 0; } .main:after { content: ''; display: inline-block; width: 100%; } h1, .image { text-align: left; font-size: medium; } .image { vertical-align: top; display: inline-block; width: 30.3571%; }
सब कुछ छद्म तत्व के लिए धन्यवाद काम करता है: के बाद: यह वह है जो तत्वों के बीच इंडेंट करता है।
मैं समझता हूं कि यह कैसे काम करता है, लेकिन मुझे समझ में नहीं आता कि यह क्यों काम करता है। : तत्व के बाद प्रकट होता है ... मुझे टिप्पणियों में विवरण देखना अच्छा लगेगा। । ब्लॉक की चौड़ाई और पैडिंग को सीएसएस में निम्नलिखित सूत्र का उपयोग करके परिभाषित किया गया है:
और यह सूत्र एक सुंदर SASS फ़ाइल का उपयोग करके गणना की जाती है:
$columns: 12 !default; $column-width: 4em !default; $gutter-width: 2.5em !default; %grid { text-align: justify !important; text-justify: distribute-all-lines; font-size: 0 !important; & > * { text-align: left; font-size: medium; } &:after { content: ''; display: inline-block; width: 100%; } } %grid-cell { vertical-align: top; display: inline-block; width: 100%; } @function grid-span($cols, $total: $columns) { @return ($column-width * $cols + $gutter-width * ($cols - 1)) / ($column-width * $total + $gutter-width * ($total - 1)) * 100%; }
ग्रिड का औचित्य - क्रॉस-ब्राउज़र। साथ ही, फ्रेमवर्क आपको .push .pull .append .prepend कक्षाओं का उपयोग करके तत्वों को स्थानांतरित करने और जोड़ने की अनुमति देता है। और प्रोजेक्ट साइट पर दिए गए मापदंडों से वांछित सीएसएस का एक जनरेटर भी है।
प्रोजेक्ट पेज -
http://justifygrid.com/GitHubध्यान देने के लिए आप सभी का धन्यवाद।