一部の要素のみの浮動左とインラインブロックの作業

Question

単純な2行レイアウトを得るためにインライン/インラインブロックを使用しようとしていますが、3番目の要素では機能しません。一番上の行には3枚の写真があり、一番下の行にはテキストが関連する各写真の下にテキストがあることを望みます。誰かが私が間違っていることを説明することはできますか？

.floatL { 
 
    float: left; 
 
} 
 

 
.box div { 
 
    display: inline-block; 
 
}

<div class="box"> 
 

 
    <div class="floatL"> 
 
    <img src="dog1.jpg" alt="Picture of a Dog" width="100" height="100"> 
 
    <p>Something about the dog</p> 
 
    </img> 
 

 
    </div> 
 

 
    <div class="floatL"> 
 
    <img src="cat1.jpeg" alt="Picture of a Cat" width="100" height="100"> 
 
    <p>Something about the dog</p> 
 
    </img> 
 
    <div class="floatL"> 
 

 
     <img src="colors1.jpg" alt="Picture of Colors" width="100" height="100"> 
 
     <p>Something about the dog</p> 
 
     </img> 
 

 
    </div> 
 

 
    </div>

Answer 1

@Johannes氏によれば、3番目の浮動小数点要素はネストされています。

適切にインデントする必要があります。これらをより簡単にキャッチします。

また、で終了タグを使用しないでください。

コードのリファクタリングについてはfiddleを参照してください。

Answer 2

あなたの第三.floatL要素は、第1の内側にある - 三つ目の開始タグの前に終了DIVタグを置きます。