łącząc display: inline-block z clear: both nie pionowo układania div

Question

Mam niektóre HTML, który wygląda tak:

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

CSS wygląda następująco:

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

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

używam inline-block, dzięki czemu obiekt TheData może ładnie owijać się wokół zawartości, zamiast rozszerzać całkowitą szerokość TheContainer. Używam również clear:both, aby divy TheData były ułożone jeden nad drugim.

Jednak wydaje się, że clear:both nie ma zastosowania, gdy elementy są ustawione na inline-block. Poniższy przykład demonstruje tutaj JSFiddle.

Jak korzystać z inline-block I zrobić pionowe stosy?

Dzięki.

Answer 1

clear jest tylko dla oczyszczenia float

Aby uzyskać pożądany efekt, umieścić float:left na .TheData. Najprawdopodobniej będziesz także potrzebował elementu poniżej tych div.TheData s z clear, ale nie float, aby upewnić się, że pojemnik renderuje się z prawidłową wysokością.

Updated fiddle

Answer 2

myślę co chcesz to the one clear-fix to rule them all.

Nie sądzę, że chcesz display: inline-block;, ponieważ faktycznie działa tak, jak powinna. może być lepiej z float: left; clear: both; na swoich wewnętrznych elementów i jasne-fix na elemencie pojemnika:

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