在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中对齐两个图像

回答

相关问题