インラインブロックの不一致

Question

inline-blockにdivとimgが混在していますが、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;を追加する必要があります。

例スニペット：垂直-alignプロパティについて

.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