कुछ पंक्तियों में एक ही ऊंचाई के इनलाइन-ब्लॉक तत्व

Question

क्या मैं जेएस और न्यूनतम ऊंचाई (एक विशेष मामले के रूप में) के बिना एक ही ऊंचाई के सभी ब्लॉक कर सकता हूं? ब्लॉक कई लाइनों पर रखा जा सकता है।

उदाहरण jsfiddle

ul { 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

Answer 1

तो flexbox एक विकल्प है, तो आप ul एक flexbox लपेटकर कर सकते हैं।

यह कैसे काम करता है?

1. display: flex एक flexbox जो संपत्ति है विभिन्न तरीकों से अपने बच्चों के बीच खाली स्थान के वितरित करने के लिए बनाता है।

2. flex-wrap: wrapli सामग्री

3. justify-content: center क्षैतिज केंद्रित करता है के आधार पर अगली पंक्ति में जा सकते हैं। इस li रों की ऊंचाई एक लाइन में बराबर होने की अनुमति देता -

4. खड़ी li एक संपत्ति align-items: stretch कहा जाता है, जो कि डिफ़ॉल्ट है।

डेमो नीचे देखें:

ul { 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

Answer 2

आसानी से, display: flex का उपयोग कर।

ul { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    font-size: 0; 
 
    max-width: 300px; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: grey; 
 
    font-size: 12px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
 
</ul>

: उन्मुखीकरण + flex-flow: row wrap; में रैपिंग और में justify-content: center;

उदाहरण केंद्रीय संरेखण निर्दिष्ट करें