在CSS中對齊兩個圖像

我想用CSS水平對齊兩個圖像。在CSS中，我有：在CSS中對齊兩個圖像

#poster1 { 
background-image: url(audioMaster1.png); 
background-repeat: no-repeat; 
background-position: 0px 40px; 
padding-top:595px; 
} 
#poster2 { 
background-image: url(audioMaster2.png); 
background-repeat: no-repeat; 
background-position: 0px 0px; 
padding-top:595px; 
}

和HTML，我都不得不時刻：

<div id="poster1"></div> 
<div id="poster2"></div>

但是，很明顯，這些圖像都低於對方，我不想要的。我希望圖像並排。

來源

2011-07-18 AJW

給div元素一個明確的寬度;否則它們將展開以填充所有可用的水平寬度。

然後您將需要float他們或使用inline-block。

jsFiddle。

來源

2011-07-18 02:52:15 alex

你能多解釋一下alex？我不認爲你所說的解決了我的問題。我的問題是圖像垂直平鋪而不是水平平鋪。 – AJW

@James檢查小提琴...是你想要的嗎？ – alex

@james你需要給我們關於圖像的一些信息，你是什麼意思的平鋪，因爲你有'background-repeat：no-repeat;'btw真棒名字;） –

您需要添加一些東西，試試這個：

#poster1 { 
background-image: url(audioMaster1.png); 
background-repeat: no-repeat; 
background-position: 0px 40px; 
padding-top:595px; 
float:left; 
} 
#poster2 { 
background-image: url(audioMaster1.png); 
background-repeat: no-repeat; 
background-position: 0px 0px; 
padding-top:595px; 
float:left; 
} 
#wrapper{}

通知彩車。您還可以添加寬度以指定您想要的寬度。

也添加包裝也很常見。

<div id="wrapper"> 
    <div id="poster1">aa</div> 
    <div id="poster2">bb</div 
</div>

來源

2011-07-18 03:03:41

strimp ..你的方法似乎不適合我..圖像似乎消失當我添加浮動：左div元素。 – AJW

好試試這個：

CSS: #image1, #image2 {float:left; display:inline-block; background:#000; width:250px; height:250px; margin:5px;} 

<div id="wrapper"> 
<div id="image1"><img src="1" /></div> 
<div id="image2"><img src="2" /></div> 
</div>

你會發現你有並排兩個黑盒子側面，只需更換背景：＃000與圖像URL所以例如這將是：背景： url（「audioMaster1.png」）no-repeat 0px 40px;

然後，您可以使用「包裝器」將兩個圖像一起移動。 :)

這應該做的工作。

來源

2011-07-18 11:14:20 Magnum26

嗨，我嘗試了你的建議，但是，它仍然垂直排列圖像而不是水平排列。我使用的是：＃poster3 { background-image：url（findoutmore.png）; background-repeat：no-repeat; background-position：285px 20px; padding-top：50px; 溢出：隱藏; 寬度：590px; float：left;

在我的HTML ..它似乎在Firefox中工作。 – AJW

在CSS中對齊兩個圖像

回答

相關問題