सीएसएस - डिस्प्ले वाले तत्वों पर लंबवत स्थान जोड़ा जा रहा है: इनलाइन-ब्लॉक

Question

मुझे सीएसएस प्रॉपर्टी डिस्प्ले के साथ थंबनेल कंटेनर तत्वों की एक श्रृंखला मिली है: इनलाइन-ब्लॉक लेकिन जब वे एक दूसरे के बगल में लाइन करते हैं, तो दूसरा तत्व होता है पहले की तुलना में शीर्ष पर अधिक स्थान (संलग्न छवि देखें)। कोई विचार क्यों ऐसा होता है? क्या इन तत्वों को एक दूसरे के बगल में लाइन करने का एक बेहतर तरीका है? मुझे पता है कि उन्हें तैरने से यह समस्या हल हो जाती है, लेकिन ऐसा लगता है कि फ्लोटिंग इस बारे में जाने का सबसे अच्छा तरीका नहीं है।

यहाँ मेरी कोड है:

HTML:

<article class="thumb_container"> 
    <div class="thumb_content"> 
     <img src="images/perlin.jpg" alt="Perlin Lines" class="thumb_img"/> 
     <header class="thumb_header">Perlin Lines</header> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. Etiam ut. 
      <a href="#">More...</a> 
     </p> 
    </div> 
</article> 

<article class="thumb_container"> 
    <div class="thumb_content"> 
     <img src="images/branching.gif" alt="Branching" class="thumb_img"/> 
     <header class="thumb_header">Branching</header> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. 
      <a href="#">More...</a> 
     </p> 
    </div> 
</article> 

सीएसएस:

.thumb_container { display: inline-block; margin-left: 20px; width:220px; background: #fff; -moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); -webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); } 
.thumb_container:first-child { margin-left: 0px; } 

Answer 1

बस vertical-align: top जोड़ें जहां आपके पास display: inline-block है।

अधिक जानकारी यहां: Why aren't these elements with display:inline-block properly aligned?

Answer 2

कभी कभी चल सर्वश्रेष्ठ उत्तर है।

.thumb_container { 
    display: inline-block; 
    float: left;    <------- 
    margin: 0 0 0 20px; 
    width: 220px; 
    background: #fff; 
    -moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); 
    -webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); 
    box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); 
} 
.thumb_container:first-child { margin-left: 0px; } 

Answer 3

आप इसे इस तरह से सोचना: इनलाइन ब्लॉक मूल रूप से बढ़ाया व्यवहार का एक सा के साथ इनलाइन तत्व हैं। तो क्या होता है, जब आप एक दूसरे के बगल में इनलाइन तत्व डालते हैं? यहाँ एक उदाहरण:

<p>This is <strong>a</strong> <span>stupid</span> example.</p> 

इस वाक्य a में और stupid एक सफेद स्थान से अलग होती है। यही वही है जो आप उम्मीद करेंगे। आपके उदाहरण में एक article टैग को अगले स्थान से एक सफेद स्थान से अलग किया गया है। तो सबसे सरल समाधान इस तरह टैग के बीच सफेद स्थान पट्टी है:

<article> 
    ... 
</article><article> 
    ... 
</article> 

एक अन्य समाधान कंटेनर फ्लोट करने के लिए है, लेकिन display:inline-block बल्कि बेकार प्रदान की गई है, जब आप तैरता का उपयोग करें। आप इसे आसानी से पट्टी कर सकते हैं।