संयोजन प्रदर्शन: स्पष्ट साथ इनलाइन-ब्लॉक: दोनों खड़ी stacking नहीं divs

Question

मैं कुछ HTML है कि इस तरह दिखता है:

<div class="TheContainer"> 

<div class="TheData">this is some text inline-block with clear</div> 
<div class="TheData">this is some other text inline-block but not clearing</div> 

</div> 

सीएसएस इस तरह दिखता है:

.TheContainer{ 
margin:20px 20px; 
background:red;} 

.TheData{ 
display:inline-block; 
clear:both; 
background:yellow; 
padding:5px 5px; 
margin:10px 10px;} 

मैं उपयोग कर रहा हूँ inline-block ताकि TheData divs TheContainer की कुल चौड़ाई बढ़ाने के बजाय अपनी सामग्री के चारों ओर अच्छी तरह लपेटें। मैं clear:both का भी उपयोग कर रहा हूं ताकि ये दडाटा divs दूसरे के ऊपर एक स्टैक्ड हो जाए।

हालांकि, ऐसा लगता है कि clear:both लागू नहीं होते हैं जब तत्व inline-block पर सेट होते हैं। JSFiddle यहां यह दर्शाता है।

मैं inline-block का उपयोग कैसे करूं और divs को लंबवत रूप से ढेर कर दूं?

धन्यवाद।

Answer 1

clear केवल float

समाशोधन प्रभाव आप चाहते हैं पाने के लिए के लिए है, .TheData पर float:left डाल दिया। कंटेनर सही ऊंचाई के साथ प्रस्तुत करने के लिए आप शायद div.TheData एस clear के साथ float पर float के साथ एक तत्व भी चाहते हैं।

Updated fiddle

Answer 2

मुझे लगता है कि क्या आप चाहते हैं the one clear-fix to rule them all है।

मुझे नहीं लगता कि आप display: inline-block; चाहते हैं क्योंकि यह वास्तव में जिस तरह से काम करना चाहता है। आप अपने भीतर के तत्वों पर float: left; clear: both; और कंटेनर तत्व पर स्पष्ट ठीक के साथ बंद बेहतर हो सकता है:

सीएसएस:

TheContainer{ 
    margin:20px 20px; 
    padding:10px 10px; 
    background:red; 
    clear:both; 
} 

.TheData{ 
    float:left; 
    clear: both; 
    background:yellow; 
    padding:5px 5px; 
    margin:10px; 
} 

/* For modern browsers */ 
.cf:before, 
.cf:after { 
    content:""; 
    display:table; 
} 
.cf:after { 
    clear:both; 
} 
/* For IE 6/7 (trigger hasLayout) */ 
.cf { 
    zoom:1; 
}. 

<div class="TheContainer cf"> 

    <div class="TheData">smaller</div> 
    <div class="TheData">smaller a</div> 
    <div class="TheData">smaller a b</div> 
    <div class="TheData">smaller a b c</div> 
    <div class="TheData">smaller a b c d</div> 
    <div class="TheData">this is some other text inline-block but not clearing</div> 
</div> 

jsFiddle