画像を正しく並べることができません。

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; 
} 

このコードは、私が欲しいものを与えますが、それほどではありません。だから、私はこれらのリンクをループされている、それは親指とモデル名のすぐ下に中心が含まれています。私は、これらの親指と名前を動的に行に配置し、十分なスペースがないときに別の行を作成します。今はやっていますが、時々バギーになって行をスキップします...それは単なる混乱です。親指はさまざまなサイズにすることができます。私は十分な部屋がない場合、行の最後に空白を気にしない。

また、800px幅の寸法を持つペーストしなかったメインコンテナdivもあります。

多分、誰かがこのレイアウトに近づくより良い、よりクリーンな方法を持っています。

Answer 1

フロートしたdivがフロートしていないaの中に置かれていることが原因で問題が発生したと思います。これはdivを浮動小数点にしますが、aはインライン要素であるため、この効果は無効になります。

.thumb_containerスタイル宣言をa要素に追加してください。

ところで、サイズの異なるサムネイルを使用している場合、これは常に醜いと見える可能性があります。特定の幅と高さを含むdivに設定し、overflow〜hiddenに設定してみることもできます。 spanをdiv.thumb_containerの外に移動する必要がありますが、それは問題ではありません。その後、いくつかのCSSやJSの効果を使って、ホバー上のサムネイル全体を表示することができます。