无法让图像正确对齐自己

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

此代码有点给我我想要但不完全。所以我有这些链接成环，其中包含一个拇指和一个模型名称正下方。我希望这些大拇指和名字能够动态放置在行中，当空间不足时它会创建另一行。它现在正在做，但有时会得到越野车并跳过一排......这只是一团糟。请记住，拇指可以是不同的大小;如果没有足够的空间，我不介意在行尾有间隔。

还有一个主容器div我没有粘贴，只有800px宽度的尺寸。

也许有人有更好和更清洁的方式来接近这种布局。

Answer 1

我认为问题是由于浮动的div被放置在非浮动的a内。虽然这会浮动div，但效果会被取消，因为a是内嵌元素。

尝试将.thumb_container样式声明添加到a元素。

顺便说一句，如果你使用不同大小的缩略图，这总是会有可能看起来很丑。您也可以尝试设置特定的宽度和高度，以包含div并将overflow设置为hidden。您需要将您的span移至div.thumb_container以外，但这不应该成为问题。然后，您可以使用一些CSS和/或JS效果来显示悬停时的完整缩略图。