CSSで2つの画像を整列する

Question

CSSを使用して2つの画像を水平に整列しようとしています。 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> 

しかし、明らかに、画像は私が望んでいないこれ、お互いに下回っています。私は画像を並べて欲しいです。

Answer 1

div要素に明示的な幅を指定します。そうでなければ、利用可能なすべての水平幅を埋めるように展開されます。

floatにするか、inline-blockを使用してください。

jsFiddle。あなたはこれを試して、いくつかのものを追加する必要が

Answer 2

：

#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> 

Answer 3

okが、これを試してみてください。

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> 

あなたは単に背景置き換える、あなたが側による2つのブラックボックス側を持って見つける必要があります。それは次のようになりインスタンスのように、自分のイメージURLと＃000：背景： url（ "audioMaster1.png"）no-repeat 0px 40px;

「ラッパー」を使用して、両方の画像を一緒に移動することができます。 :)

それは仕事をする必要があります。