आप केवल सीएसएस के साथ ऊर्ध्वाधर और क्षैतिज केंद्रित सामग्री के साथ वर्गों के उत्तरदायी ग्रिड बना सकते हैं । मैं समझाऊंगा कि कैसे एक स्टेप बाय स्टेप प्रक्रिया होती है लेकिन पहले यहाँ 2 डेमो हैं जो आप प्राप्त कर सकते हैं:
अब देखते हैं कि इन फैंसी उत्तरदायी वर्गों को कैसे बनाया जाए!
1. उत्तरदायी वर्ग बनाना:
तत्वों का वर्ग (या जो भी अन्य पहलू अनुपात) रखने की चाल प्रतिशत का उपयोग करना है padding-bottom।
साइड नोट: आप टॉप पैडिंग या टॉप / बॉटम मार्जिन का भी उपयोग कर सकते हैं लेकिन तत्व की पृष्ठभूमि प्रदर्शित नहीं होगी।
चूंकि शीर्ष पैडिंग की गणना मूल तत्व की चौड़ाई के अनुसार की जाती है ( संदर्भ के लिए MDN देखें ), तत्व की ऊंचाई इसकी चौड़ाई के अनुसार बदल जाएगी। अब आप इसकी चौड़ाई के अनुसार इसका पहलू अनुपात रख सकते हैं ।
इस बिंदु पर आप कोड कर सकते हैं:
HTML :
<div></div>
सीएसएस
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
यहाँ ऊपर दिए गए कोड का उपयोग करके 3 * 3 वर्ग ग्रिड का एक सरल लेआउट उदाहरण है।
इस तकनीक के साथ, आप किसी भी अन्य पहलू अनुपात बना सकते हैं, यहां एक टेबल है जो पहलू अनुपात और 30% चौड़ाई के अनुसार नीचे पैडिंग का मान देता है।
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
2. वर्गों के अंदर सामग्री जोड़ना
जब आप सीधे वर्ग के अंदर सामग्री नहीं जोड़ सकते हैं (यह उनकी ऊँचाई का विस्तार करेगा और वर्ग अब और वर्ग नहीं होंगे) तो आपको उनके अंदर बाल तत्व (उदाहरण के लिए मैं div का उपयोग कर रहा हूँ) बनाने की आवश्यकता है position: absolute;और उनके अंदर की सामग्री डालें । यह सामग्री को प्रवाह से बाहर ले जाएगा और वर्ग के आकार को बनाए रखेगा।
position:relative;माता-पिता divs पर जोड़ना न भूलें, ताकि निरपेक्ष बच्चे अपने माता-पिता के लिए अपेक्षाकृत आकार में तैनात / आकार लें।
चलो वर्गों के हमारे 3x3 ग्रिड में कुछ सामग्री जोड़ें:
HTML :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
सीएसएस :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
परिणाम <- यह सुंदर बनाने के लिए कुछ स्वरूपण के साथ!
3. सामग्री प्रस्तुत करना
क्षैतिज रूप से:
यह बहुत आसान है, आपको बस इसमें जोड़ना text-align:centerहोगा .content।
परिणाम
लंबवत संरेखण
यह गंभीर हो जाता है! चाल का उपयोग करना है
display:table;
/* and */
display:table-cell;
vertical-align:middle;
लेकिन हम display:table;पर .squareया .contentdivs का उपयोग नहीं कर सकते क्योंकि यह संघर्ष करता है position:absolute;इसलिए हमें .contentdiv के अंदर दो बच्चे पैदा करने की आवश्यकता है । हमारा कोड निम्नानुसार अपडेट किया जाएगा:
HTML :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
सीएसएस:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
अब हम समाप्त कर चुके हैं और हम यहां परिणाम देख सकते हैं:
यहाँ संपादन योग्य बेला
