3圖像在容器

CSS居中3圖像在容器

.contain { 
max-width:960px; 
text-align:center; 
} 

.category { 
position:relative; 
display: inline-block; 
float:left; 
padding:10px; 
} 

.category2 { 
position:relative; 
display: inline-block; 
pading:10px; 
} 
.category3 { 
position:relative; 
display: inline-block; 
float:right; 
margin-right:50%; 
padding:10px; 
}

HTML

 <div align="center" class="category"> 
     <img src="gemstoneshomebutton.png" /> 
     </div> 
     <div align="center" class="category2"> 
     <img src="dichroichomebutton.png" /> 
     </div> 
     <div align="center" class="category3"> 
     <img src="filigreehomebutton.png" /> 

</div>

我試圖通過111像素對齊3倍的圖像是309像素寬，高的容器格內，他們不對準中心，也是第三圖像跳下其他兩個圖像下方。我試圖調整容器的寬度和3個的div，我已經試過表和上沒有成功的實際HTML改變寬度。

這是我第一次和div一起工作，我認爲他們會更容易，也許我的數學在分配寬度時關閉了，或者我只是把它全部錯誤地結構化了。[這是我的一個例子努力實現，這三個類別中的圖片在這裏。] http://i49.tinypic.com/2r2uqso.jpg

任何和所有幫助將不勝感激。

來源

2013-04-07 user2255322

把'float：left'放在三個上面。還去觀看CSS-技巧一些截屏，它們會讓你的學習過程變得更容易:) – 2013-04-07 20:00:10

謝謝你這麼多，雖然我只是做的是，和所有它所做的就是把第一個兩個div /圖像之間的空間。 – user2255322 2013-04-07 20:05:18

'檢查元素'是你的朋友，用它來解決定位問題。我的猜測是你可能需要調整寬度，並擺脫邊緣。同樣重要的是要知道，浮動元素使'display'屬性不相關。 – 2013-04-07 20:08:59

CSS

.contain { 
    max-width:960px; 
    text-align:center; 
} 

.category { 
    position:relative; 
    display: inline-block; 
    float:left; 
    padding:10px; 
}

HTML

<div align="center" class="category"> 
    <img src="gemstoneshomebutton.png" /> 
</div> 
<div align="center" class="category"> 
    <img src="dichroichomebutton.png" /> 
</div> 
<div align="center" class="category"> 
    <img src="filigreehomebutton.png" />  
</div>

來源

2013-04-07 20:02:34

感謝您的幫助。看起來，第一個div仍然在邊上（容器外），第三個div仍然低於另外兩個，在我做出這些改變之後。 http://i49.tinypic.com/28mrt4.png看到這裏 – user2255322 2013-04-07 20:13:27

認爲，如果你的圖像具有各309px寬度[3 * 309 = 927px]和具有左填充和右[（2 * 10）* 3 = 60 ）]所有這三個在一起將有一個987px，這是超過960px的寬度。最後一個因缺乏空間而下降。 – pzin 2013-04-07 20:26:57

解決了我的問題，謝謝！ – user2255322 2013-04-08 02:43:31

不要忘了在img標籤中添加 'ALT' 屬性！對於視力不好或失明的人尤其重要。

http://www.myblogsplace.com/images-alt-text

來源

2013-10-20 11:13:59

3圖像在容器

回答

相關問題