Абсолютное позиционирование. Нужна помощь в отображении 3 изображений вместо 1

Question

    </div>

<div style="position:absolute;top:160px;left:535px;"><img src="splash.png"></div>
<div style="position:absolute;top:160px;left:535px;"><img src="splash2.png"></div>
<div style="position:absolute;top:160px;left:535px;"><img src="splash3.png"></div>
<!-- Press Logos -->
<div align="center">

как мне заставить все три заставки отображаться горизонтально ...

Answer 1

Вы также можете использовать поплавки:

#header
{
     height: 100px; /*or something */
 }
#header img
{
      float: left;
      margin: 20px; /*change the margin(s) as you need */
}

Answer 2

Попробуйте изменить свой код так:

<div style="position:absolute;top:160px;left:535px;">
    <img src="splash.png"><img src="splash2.png"><img src="splash3.png">
</div>

Answer 3

Под «горизонтальным отображением» вы имеете в виду, что они сидят рядом друг с другом на одной строке? Изображения в разметке будут делать это естественно, если не будет достаточно места, и в этом случае они будут перенесены в пространство ниже.

<div>
    <img src="splash.png" />
    <img src="splash2.png" />
    <img src="splash3.png" />
</div>

Вы можете применить стилизацию к окружающему элементу div, чтобы расположить изображения по центру и т. Д.

Кроме того, в исходном примере разметки имеется некоторая неверная разметка. Ваши теги изображений должны быть самозакрывающимися (т.е. заканчиваться на />, а не>).

Answer 4

Вы могли бы

• Дайте каждому div свою позицию x (самый простой способ, действительно)

• Поместите их в контейнер достаточной ширины и дайте контейнеру position: absolute вместо окружающих элементов div