Плавающие дивы толкают вниз

Question

Я так не уверен, почему это происходит, у меня много проблем найти решение, поэтому здесь просто и ясно

HTML

<div class="thing"></div> 
<div id="big" class="thing"></div> 
<div class="thing"></div> 
<div class="thing"></div> 
<div class="thing"></div> 
<div id="big" class="thing"></div> 
<div class="thing"></div> 

CSS

.thing { 
    background-color: blue; 
    height: 100px; 
    width: 80px; 
    margin: 20px 0 0 20px; 
    display: inline-block; 
    float: left; 
} 

#big { 
    height: 140px; 
} 

JSFiddle: https://jsfiddle.net/sdmq155g/1/

синие дивы на дне не должно нажимать вниз, если над ними нет большого div. Они должны все прижаться прямо под ним. Но по какой-то причине все их позиции основаны на больших div в верхнем ряду, хотя они не все находятся непосредственно под одним.

Answer 1

Модель коробки, которую реализует весь браузер, ведет себя точно так, как демонстрирует ваш jsFiddle. Синие divs не будут прижиматься друг к другу, но на самом деле они начнутся на следующей строке, основываясь на самом высоком элементе в строке выше.

Вы можете преодолеть это, поместив divs, которые вы хотите уложить в столбец, а затем плаваете эти div.

Пример здесь:

.col { 
 
    float: left; 
 
    width: 80px; 
 
} 
 
.thing { 
 
    background-color: blue; 
 
    border: solid 1px red; 
 
    height: 100px; 
 
} 
 

 
#big { 
 
    height: 140px; 
 
}

<div class="col"> 
 
    <div class="thing"></div> 
 
    <div id="big" class="thing"></div> 
 
</div> 
 
<div class="col"> 
 
    <div id="big" class="thing"></div> 
 
    <div class="thing"></div> 
 
</div> 
 
<div class="col"> 
 
    <div class="thing"></div> 
 
    <div id="big" class="thing"></div> 
 
</div> 
 
<div class="col"> 
 
    <div class="thing"></div> 
 
    <div id="big" class="thing"></div> 
 
</div> 
 
<div class="col"> 
 
    <div class="thing"></div> 
 
    <div id="big" class="thing"></div> 
 
</div>