несоответствие в встроенном блоке

Question

Я смешал div и img в inline-block, но div не является встроенным с другими изображениями. Не могли бы вы рассказать мне, почему и как это исправить?

Мой код:

.floating-box { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 20px; 
 
    border: 3px solid #73AD21; 
 
} 
 
.after-box { 
 
    border: 3px solid red; 
 
}

<h2>The New Way - using inline-block</h2> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<div class="floating-box">Yeah</div> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<div class="after-box">Another box, after the floating boxes...</div>

Answer 1

Вам нужно добавить свойство CSS vertical-align: top; для выравнивания верхней части всех элементов.

Пример сниппето:

.floating-box { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 20px; 
 
    border: 3px solid #73AD21; 
 
    vertical-align: top; 
 
} 
 
.after-box { 
 
    border: 3px solid red; 
 
}

<h2>The New Way - using inline-block</h2> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<div class="floating-box">Yeah</div> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png"> 
 
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg"> 
 
<div class="after-box">Another box, after the floating boxes...</div>

Читайте о вертикальном выравнивании собственности подробно here