दिलचस्प पोस्ट
मैं वास्तविक मॉनिटर नाम कैसे प्राप्त करूं? जैसा कि संकल्प संवाद में देखा गया है क्यों strtok () अनिर्धारित माना जाता है? टंकिनर मेनू में फ्रेम के बीच स्विच करना एक DLL से आयात लायब्रेरी (LIB-file) कैसे उत्पन्न करें? कैसे एक टीसीपी पोर्ट को PHP का उपयोग करने के लिए सुनने के लिए? Xlsx को csv में लिनक्स कमांड लाइन में कनवर्ट करें मुझे std :: size_t का उपयोग कब करना चाहिए? विंडोज फोन 8 के लिए एचटीपी पोस्ट चयनित पाठ का मूल तत्व प्राप्त करें IntelliJ IDEA में ऑटो त्रुटियों का पता लगाने जावा में स्ट्रिंग डिफ्स कैसे करें? फ़्लोटिंग मान प्रिंट करने के लिए printf का उपयोग करना स्विफ्ट में एक अद्वितीय डिवाइस आईडी कैसे प्राप्त करें? IPhone पर संपीड़न एपीआई एक आंतरिक वर्ग के साथ जावा कोड एक तीसरा SomeClass $ 1. वर्ग फ़ाइल क्यों बनाता है?

सीएसएस – समान ऊँचाई कॉलम?

सीएसएस में, मैं ऐसा कुछ कर सकता हूं:

वैकल्पिक पाठ http://img.hiwab.com/css/2lcp555.png

लेकिन मुझे यह पता नहीं है कि ऐसा कैसे बदलना चाहिए:

वैकल्पिक पाठ http://img.hiwab.com/css/30jp9nk.png


सीएसएस के साथ यह संभव है?

यदि हां, तो मैं स्पष्ट रूप से ऊंचाई निर्दिष्ट करने के बिना यह कैसे कर सकता हूँ (सामग्री बढ़ने दें)?

Solutions Collecting From Web of "सीएसएस – समान ऊँचाई कॉलम?"

flexbox

यदि आप इसे 2013 के अंत में पढ़ रहे हैं, तो आपके पास अपने निपटान में flexbox है इस लेआउट को मान लें:

<div class="row"> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> </div> 

फ्लेक्सबॉक्स के साथ, समान ऊंचाई कॉलम केवल एक घोषणा है:

 .row { display: flex; /* equal height of the children */ } .col { flex: 1; /* additionally, equal width */ } 

ब्राउज़र समर्थन: http://caniuse.com/flexbox ; डेमो: http://jsfiddle.net/7L7rS/

टेबल लेआउट

यदि आपको अभी भी IE 8 या 9 का समर्थन करने की आवश्यकता है, तो आपको टेबल लेआउट का उपयोग करना होगा:

 .row { display: table; } .col { display: table-cell; width: 33.33%; /* depends on the number of columns */ } 

डेमो: http://jsfiddle.net/UT7ZD/

हाँ।

यहाँ पूरा सीएसएस है लेख का उपयोग करता है। यह पूरे लेख को पढ़ने में काफी लायक है, क्योंकि लेखक इस कदम को आगे बढ़ाता है ताकि आपको यह काम करने की आवश्यकता हो।

 #container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:26%; position:relative; left:72%; overflow:hidden; } #col2 { float:left; width:36%; position:relative; left:76%; overflow:hidden; } #col3 { float:left; width:26%; position:relative; left:80%; overflow:hidden; } 

ऐसा करने का यह एकमात्र तरीका नहीं है, लेकिन यह संभवतया सबसे शानदार तरीके से मैंने सामना किया है।

एक अन्य साइट है जो इस तरीके से पूरी तरह से किया जाता है, स्रोत देखने से आप यह देख पाएंगे कि उन्होंने यह कैसे किया ।

overflow: hidden दें overflow: hidden कंटेनर और बड़े (और बराबर) नकारात्मक मार्जिन और कॉलम के लिए सकारात्मक पैडिंग को छुपाएं। ध्यान दें कि इस पद्धति में कुछ समस्याएं हैं, जैसे लंगर लिंक आपके लेआउट में काम नहीं करेंगे।

मार्कअप

 <div class="container"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> 

सीएसएस

 .container { overflow: hidden; } .column { float: left; margin-bottom: -10000px; padding-bottom: 10000px; } 

परिणाम

सीएसएस बराबर ऊंचाई कॉलम

आप सीएसएस तालिकाओं का इस्तेमाल कर सकते हैं, जैसे:

 <style type='text/css"> .container { display: table; } .container .row { display: table-row; } .container .row .panel { display: table-cell; } </style> <div class="container"> <div class="row"> <div class="panel">...text...</div> <div class="panel">...text...</div> <div class="panel">...text...</div> </div> </div> 

आप निम्न जावास्क्रिप्ट के साथ आसानी से ऐसा कर सकते हैं:

 $(window).load(function() { var els = $('div.left, div.middle, div.right'); els.height(getTallestHeight(els)); }); function getTallestHeight(elements) { var tallest = 0, height; for(i; i < elements.length; i++) { height = $(elements[i]).height(); if(height > tallest) tallest = height; } return tallest; }; 

आप इसे करने की कोशिश कर रहे हैं … यह मेरे लिए और सभी ब्राउज़र के लिए काम करता है …

 <div id="main" style="width:800px; display:table"> <div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div> <div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div> </div> 

उत्तर उत्तर:

सीएसएस फ्लेक्सबॉक्स प्यारा है, लेकिन आज IE9 उपयोगकर्ताओं को काटने से थोड़ा पागल है 1 अगस्त 2015 के रूप में हमारे गुणों पर:

3% आईई 9
2% IE8

उन लोगों को काटकर 5% टूटा पृष्ठ दिख रहा है? पागल।

मीडिया क्वेरी का उपयोग करना जिस तरह से बूटस्ट्रैप आईई 8 पर वापस जाता है, जैसा कि display: table/table-cell करता display: table/table-cell । इसलिए:

http://jsfiddle.net/b9chris/bu6Lejw6/

एचटीएमएल

 <div class=box> <div class="col col1">Col 1<br/>Col 1</div> <div class="col col2">Col 2</div> </div> 

सीएसएस

 body { font: 10pt Verdana; padding: 0; margin: 0; } div.col { padding: 10px; } div.col1 { background: #8ff; } div.col2 { background: #8f8; } @media (min-width: 400px) { div.box { display: table; width: 100%; } div.col { display: table-cell; width: 50%; } } 

मैंने 400px को इस मामले में कॉलम के बीच स्विच और एक ऊर्ध्वाधर लेआउट के रूप में उपयोग किया, क्योंकि जेएसफ़िडेल पेन को काफी छोटी प्रवृत्त करता है। उस विंडो के आकार के साथ गड़बड़ और आप कॉलम को अच्छी तरह से खुद को पुनर्व्यवस्थित करेंगे, जिसमें उन्हें पूर्ण ऊंचाई तक खींचने की आवश्यकता होगी, जब उन्हें कॉलम होना चाहिए ताकि उनके पृष्ठभूमि रंगों को पेज से नीचे भाग नहीं मिल पाएं। कोई पागल पैडिंग / मार्जिन हैक्स जो पेज पर बाद में टैग में क्रैश हो जाता है, और भेड़ियों को आपके आगंतुकों का 5% तक नहीं उतरता है।

एक अन्य विकल्प एक ढांचे का उपयोग करना है जिसे इस हल किया गया है। बूटस्ट्रैप के पास वर्तमान में एक समान ऊंचाई विकल्प नहीं है लेकिन फाउंडेशन द्वारा Zurb करता है, और आप देख सकते हैं कि यह कैसे काम करता है: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

यहां इसका उदाहरण है कि आप इसका उपयोग कैसे करेंगे:

 <div class="row" data-equalizer> <div class="large-6 columns panel" data-equalizer-watch> </div> <div class="large-6 columns panel" data-equalizer-watch> </div> </div> 

असल में वे सबसे ऊंची तत्व की जांच करने के लिए जावास्क्रिप्ट का उपयोग करते हैं और दूसरों को एक ही ऊँचाई बनाते हैं।

इसलिए, यदि आप सीएसएस चाहते हैं तो यह अधिक कोड जोड़ देगा, लेकिन यदि आप पहले से ही एक ढांचा का उपयोग कर रहे हैं तो उन्होंने पहले से ही इसका हल कर लिया है।

हैप्पी कोडिंग

ऐसा करने का आधुनिक तरीका: सीएसएस ग्रिड

HTML:

 <div class="container"> <div class="element">{...}</div> <div class="element">{...}</div> <div class="element">{...}</div> </div> 

सीएसएस:

 .container { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .element { border: 2px solid #000; } 

लाइव उदाहरण यहाँ है

repeat(auto-fit, minmax(200px, 1fr)); भाग कॉलम चौड़ाई सेट करता है प्रत्येक कॉलम में 1 उपलब्ध स्थान का अंश मिलता है, लेकिन 200px से कम नहीं जा सकता। नीचे 200 पिक्सल नीचे सिकुड़ने के बजाय यह नीचे लपेटता है, इसलिए यह उत्तरदायी भी है आपके पास कोई भी कॉलम भी हो सकता है, न सिर्फ 3। ये सभी अच्छी तरह फिट होंगे

यदि आपको बिल्कुल 3 कॉलम चाहिए, तो grid-template-columns: repeat(3, 1fr); उपयोग करें grid-template-columns: repeat(3, 1fr); बजाय। आप अब भी अधिक तत्व प्राप्त कर सकते हैं, वे लपेटें, उत्तरदायी हों, लेकिन हमेशा 3 कॉलम लेआउट में रखे जाएंगे।

एमडीएन या सीएसएस-ट्रिक्स पर सीएसएस ग्रिड पर अधिक।

यह साफ, पठनीय, प्रमेय, लचीला है और इसका उपयोग करने के लिए सरल भी है!

यहां एक उदाहरण है जो मैंने बस SASS में परिवर्तनशील कॉलम-गैप और कॉलम राशि (वेरिएबल्स) के साथ लिखा था:

सीएसएस:

 .fauxer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fauxer { overflow: hidden; } .fauxer > div { display: table; border-spacing: 20px; margin: -20px auto -20px -20px; width: -webkit-calc(100% + 40px); width: -moz-calc(100% + 40px); width: calc(100% + 40px); } .fauxer > div > div { display: table-row; } .fauxer > div > div > div { display: table-cell; width: 20%; padding: 20px; border: thin solid #000; } 
 <div class="fauxer"> <div> <div> <div> Lorem column 1 </div> <div> Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div> Lorem column 3 </div> <div> Lorem column 4 </div> <div> Lorem column 5 </div> </div> </div> </div>