Выравнивание двух изображений в CSS

Question

Я пытаюсь выровнять два изображения по горизонтали с помощью 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> 

, но, очевидно, изображения ниже друг друга, что я не хочу. Я хотел бы, чтобы изображения были рядом.

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> 

Вы должны найти у вас есть две черные коробки бок о бок, просто заменить фон: # 000 с вашего URL изображения так, например, было бы: фон: url ("audioMaster1.png") no-repeat 0px 40px;

Затем вы можете использовать «Обертка» для перемещения обоих изображений вокруг. :)

Это должно выполнить эту работу.