Kombination display: inline-block mit clear: both nicht vertikal divs Stapel

Question

Ich habe einige HTML-Code, der wie folgt aussieht:

<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> 

Die CSS sieht wie folgt aus:

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

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

Ich verwende inline-block, so dass die divs schön um ihren Inhalt wickeln statt die Gesamtbreite von TheContainer zu erweitern. Ich benutze auch clear:both, so dass diese TheData Divs übereinander gestapelt werden.

Es scheint jedoch, dass clear:both nicht gilt, wenn Elemente auf inline-block festgelegt sind. Die JSFiddle zeigt dies hier.

Wie verwende ich inline-block UND die Divs Stack vertikal?

Danke.

Answer 1

clear ist nur für float

Löschen Sie den gewünschten Effekt zu erhalten, setzen float:left auf .TheData. Sie werden wahrscheinlich auch ein Element unter diesen div.TheData s mit clear, aber keine float wollen, um sicherzustellen, dass der Container mit der richtigen Höhe rendert.

Updated fiddle

Answer 2

denke ich, was Sie wollen the one clear-fix to rule them all ist.

Ich glaube nicht, dass Sie display: inline-block; wollen, weil es tatsächlich so funktioniert, wie es sollte. Sie könnten mit float: left; clear: both; auf Ihren inneren Elementen besser dran, und die klaren-fix auf dem Containerelement:

CSS:

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