Bilder können nicht in Zeile richtig ausgerichtet werden

Question

<a class="profile_link" href=""> 
    <div class="thumb_container"> 
    <img class="thumb_image" src="" alt="thumb"/> 
    <span class="model_names">name</span> 
    </div> 
</a> 

a.profile_link{ 
color: black; 
outline: none; 
text-decoration: none; 
} 

.thumb_container{ 
float:left; 
padding-left: 9px; 
padding-right: 9px; 
padding-bottom: 10px; 

} 


img.thumb_image{ 
display: block; 

} 


.model_names{ 
font-size: 12px; 
text-align: center; 
} 

Dieser Code irgendwie gibt mir, was ich will, aber nicht ganz. Also habe ich diese Links geloopt, die einen Daumen und einen Modellnamen direkt darunter enthalten. Ich möchte, dass diese Daumen und Namen dynamisch in Reihen platziert werden und wenn nicht genug Platz vorhanden ist, wird eine weitere Reihe erstellt. Es tut es gerade jetzt, aber manchmal wird Buggy und springt eine Reihe ... es ist nur ein Durcheinander. Beachten Sie, dass die Daumen unterschiedliche Größen haben können; Ich habe keine Probleme am Ende der Reihen, wenn nicht genug Platz ist.

Es gibt auch einen Hauptbehälter div Ich habe nicht Paste, die nur die Abmessungen von 800px Breite hat.

Vielleicht hat jemand eine bessere und sauberere Art, dieses Layout zu erreichen.

Answer 1

Ich denke, das Problem wird verursacht, indem Ihre schwebende div in einem nicht schwebenden a platziert wird. Während dies die div floaten wird, wird der Effekt negiert, da die a ein Inline-Element ist.

Versuchen Sie, die .thumb_container Style-Deklarationen zum a Element hinzuzufügen.

BTW, das wird immer hässlich aussehen, wenn Sie Thumbnails in verschiedenen Größen verwenden. Sie könnten auch versuchen, eine bestimmte Breite und Höhe für das enthaltende div und overflow bis hidden festzulegen. Sie müssen Ihre span außerhalb von div.thumb_container verschieben, aber das sollte kein Problem sein. Sie können dann einen CSS- und/oder JS-Effekt verwenden, um das vollständige Miniaturbild bei Hover anzuzeigen.