Как разместить div под другим div с изображениями?

Question

Я уже два дня сражаюсь с этой проблемой. Я хочу поместить div с изображениями в абсолютные позиции, ниже другого div с изображениями. Каким-то образом divs игнорируют изображения и складываются друг на друга.

пример кода здесь: https://jsfiddle.net/6H4RA/10/

Так он должен отображать одно изображение в первом ряду, и два изображения в секунду. Должно быть, мне что-то не хватает.

Вот код из JSFiddle:

#banner-left { 
    position:absolute; 
    width:100px; 
    height:100px; 
} 

#header{ 
    position:relative; 
    background: #ffa; 
} 

#footer { 
      position:relative; 
      margin-top:0px; 
      width: 100%; 
      background: #6cf; 
} 
<div id="header"> 
     Header 
     <div id="banner-left"> 
      <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" /> 
     </div> 
</div> 

<div id="footer"> 
    FOOTER 
    <div id="banner-left"> 
     <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" /> 
    </div> 
    <div id="banner-left" style="top:0px;left:100px;"> 
     <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" /> 
    </div> 

--edit-- Я забыл упомянуть, что изображения должны быть абсолютными позициями. Это уловка.

Answer 1

В вас баннер шириной ид, добавьте

display: inline-block; 

Answer 2

Там не может быть никакой необходимости использовать абсолютное позиционирование в этой конструкции макета.

Вот как я мог бы подходить к реализации этого.

Примечание:id «s должен быть уникальным на веб-странице, так что я изменил вашу #banner-left к классу .banner-left.

.banner-left { 
 
    float: left; 
 
    margin-right: 20px; /* if needed */ 
 
} 
 
.banner-left img { 
 
    display: block; 
 
} 
 
#header { 
 
    overflow: auto; 
 
    background: #ffa; 
 
} 
 
#footer { 
 
    overflow: auto; 
 
    background: #6cf; 
 
}

<div id="header"> 
 
    <h1>Header</h1> 
 
    <div class="banner-left"> 
 
     <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" /> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    <h2>Footer</h2> 
 
    <div class="banner-left"> 
 
     <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" /> 
 
    </div> 
 
    <div class="banner-left"> 
 
     <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" /> 
 
    </div>

Answer 3

Я забыл упомянуть, что изображения должны быть абсолютными позициями. Это уловка.

Marc, ваш пример отлично работает, но у меня есть много изображений с абсолютной позицией, которые я хочу переместить в зависимости от размера веб-сайта с помощью простого контейнера div.

Answer 4

У вас есть пара проблем с кодом.

Во-первых, вы не можете иметь несколько элементов с одним и тем же идентификатором. Это может не вызвать проблем в вашем маленьком jsfiddle прямо сейчас, но оно может и вернется и укусит вас сзади, позже. Однако это легко решить, перевернув идентификаторы на классы.

Другая проблема заключается в том, что в тексте заголовка и нижнего колонтитула больше нет содержимого. Да, есть абсолютно позиционированные блоки, но они не учитываются. Абсолютно позиционированные элементы не участвуют в потоке страниц. Таким образом, заголовки верхнего и нижнего колонтитулов не имеют понятия о них!

Самое простое решение, как это возможно в вашем примере, - дать этим divs нижнее дополнение шириной 100 пикселей, чтобы изображения оказались внутри них, а не торчащими. (Они не действительно сидят внутри них, но они просто отображаются в том же месте, где заполняется родителями.)

.banner-left { 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
} 
 
.banner-left img { 
 
    width:100px; 
 
    height:100px; 
 
} 
 
#header{ 
 
    position:relative; 
 
    background: #ffa; 
 
    padding-bottom:100px; 
 
} 
 

 
#footer { 
 
    position:relative; 
 
    margin-top:0px; 
 
    width: 100%; 
 
    background: #6cf; 
 
    padding-bottom:100px; 
 
}

<div id="header"> 
 
    Header 
 
    <div class="banner-left"> 
 
    <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" /> 
 
    </div> 
 
</div> 
 

 
<div id="footer"> 
 
    FOOTER 
 
    <div class="banner-left"> 
 
    <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" /> 
 
    </div> 
 
    <div class="banner-left" style="left:100px;"> 
 
    <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" /> 
 
    </div>

Если, однако, вы не заранее, что высота образов являются знаете, вы, возможно, придется выполнить некоторые Javascript на изображение, чтобы выяснить, какая из них самая высокая , или узнать способ избежать display:absolute.