Floating links und Inline-Block funktioniert nur für einige Elemente

Question

Ich versuche Inline/Inline-Block zu verwenden, um eine einfache zwei Zeilen Layout zu bekommen, aber es funktioniert nicht für mein drittes Element. Ich möchte, dass die oberste Zeile drei Bilder und die untere Zeile Text unter jedem Bild enthält, auf das sich der Text bezieht. Kann jemand erklären, was ich falsch mache?

.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

Wie @Johannes sagt, wurde das dritte floated-Element verschachtelt.

Sie müssen richtig einrücken, und Sie werden diese leichter fangen.

Außerdem verwenden Sie keine abschließenden Tags unter img.

Sehen Sie diese fiddle für einen Refactor Ihres Codes.

Answer 2

ist Ihr drittes .floatL Element innerhalb der zweiten - einen Schließ DIV-Tag vor dem Starttag der dritten setzen.