समान ऊंचाई सूची आइटमों का ग्रिड कैसे प्राप्त करें?

Question

मैं सूची आइटम और inline-block का उपयोग कर उत्पादों की ग्रिड करने की कोशिश कर रहा हूं। समस्या यह है कि: ब्लॉक की सामग्री में चरम ऊंचाई होती है और inline-block ऊंचाइयों को बराबर नहीं रखता है।

कोड:

#blocks ul{ 
    list-style-type:none; 
    margin:0px; 
    padding:0px; 
} 

#blocks li { 
    display:inline-block; 
    vertical-align:top; 
    width:280px; 
    background-color:#ff9933; 
    padding:13px; 
    margin: 0px 0px 20px 19px; 
} 

<div id="blocks"> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</div> 

Here's an image to illustrate the issue.

मैं ब्लॉक की जरूरत है इसकी सामग्री की स्वतंत्र रूप से, बड़ा ब्लॉक के एक ही ऊंचाई रखने के लिए। क्या this की तरह कुछ करना संभव है?

और अंत में: क्षमा करें, अंग्रेज़ी मेरी माँ भाषा नहीं है :)

Answer 1

1.li सीएसएस में निम्नलिखित जोड़ना आपके द्वारा प्रदत्त छवि उदाहरण की नकल करेगा।

height: 150px; 
    min-height: 150px; 
    overflow:auto; 

2. इसके अलावा, यहां कुछ अन्य तरीके हैं:

• http://demo.smartnetzone.com/same-height-columns-using-jquery/
• http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
• http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 2

सबसे पहले, आप सभी 4 पक्षों यह अंतरिक्ष बाहर एक छोटे से नई लाइन के लिए प्रवाह पर बेहतर होगा पर होना करने के लिए अपने मार्जिन को समायोजित करता है, तो।

दूसरा, आप या तो एक न्यूनतम ऊंचाई निर्दिष्ट कर सकते हैं जो सभी क्षेत्रों के लिए सामान्य कुछ के करीब है, या किसी विशेष चौड़ाई वाले रेखा पर उन्हें सेट करने के लिए जावास्क्रिप्ट चलाएं।

Answer 3

मुझे नहीं लगता कि ऐसा करने के लिए जावास्क्रिप्ट को छोड़कर एक तरीका है; मेरी सिफारिश एक परिभाषित ऊंचाई और शायद overflow:auto सेट करने के लिए होगी, इसलिए यदि सामग्री ओवरफ़्लो हो जाती है तो यह आपकी साइट को अपंग नहीं करता है और आपके पाठक अभी भी आपकी सामग्री देख सकते हैं।

Answer 4

एक W3C उम्मीदवार लेआउट "flexbox" कहा जाता है कि कार लेता है इस समस्या और कई अन्य ई। समान ऊंचाई वाले बक्से को प्राप्त करने के लिए आप केवल display: flex को यूएल और display: block पर एलआईएस में संपत्ति असाइन करेंगे।

Example (CodePen)

यह आप बहुत दूर आप अगर आपको लगता है कि इस विधि आसान और सुपर शांत है आसपास पहुंच सकते हैं पुराने ब्राउज़र का समर्थन करने के :) लेकिन जरूरत है पाने के लिए नहीं जा रहा है।

संदर्भ: A Complete Guide to Flexbox

Answer 5

आप अधिक divs और इस प्रकार अधिक पंक्तियाँ, बिना पंक्ति-divs (कंटेनर divs कि एक पंक्ति को चिह्नित) है, तो सीएसएस ट्रिक्स से निम्न उदाहरण आपको क्या चाहिए करता है:

Equal Height Blocks in Rows

निम्नलिखित कोड में आठ सूची आइटम हैं। जब प्रति भूमिका केवल तीन या चार आइटम प्रदर्शित होते हैं, तो दिया गया उदाहरण सभी divs प्रति पंक्ति ऊंचाई में बराबर बना देगा।

<div id="blocks"> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</div>