2011-01-06 52 views
0
<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寬度的尺寸。

也許有人有更好和更清潔的方式來接近這種佈局。

回答

0

我認爲問題是由於浮動的div被放置在非浮動的a內。雖然這會浮動div,但效果會被取消,因爲a是內嵌元素。

嘗試將.thumb_container樣式聲明添加到a元素。

順便說一句,如果你使用不同大小的縮略圖,這總是會有可能看起來很醜。您也可以嘗試設置特定的寬度和高度,以包含div並將overflow設置爲hidden。您需要將您的span移至div.thumb_container以外,但這不應該成爲問題。然後,您可以使用一些CSS和/或JS效果來顯示懸停時的完整縮略圖。