Изображения должны появиться в нижней части DIV

0

Я пытаюсь добавить два изображения (ul, li) в конце DIV. Я использую положение ABSOLUTE, RELATIVE и left: 0, bottom: 0, и он делает это, но он не остается на div.

Изображения появляются в "MainDiv", а не в "контейнере".

Css:

#MainDiv{
  background:url(../img/background.jpg) no-repeat;
  background-size:cover;
  width:100%;
  height:600px;

}

#container{
  width:980px;
  height:600px;
  margin:0 auto;
  position:relative;
  }

#list{
  width:260px;
  height:40px;
  position:absolute;
  left:0;
  bottom:0;
}

#list li{
  width:130px;
  height:40px;
  border:1px solid white;
}

Html:

<div id="MainDiv">
  <div id="container">
    <ul id="list">
      <li id="image1">Example1</li>
      <li id="image2">Example2</li>
    </ul>
  </div>
</div>
  • 0
    я не вижу проблем с вашим кодом, за исключением того, что у #container вообще не будет высоты, так как содержимое выходит из потока
  • 0
    Из-за абсолютного позиционирования <li> технически ваш div имеет рост 0px. Попробуйте установить высоту к нему.
Показать ещё 1 комментарий
Теги:

4 ответа

0
Лучший ответ

Абсолютно позиционированный элемент позиционируется относительно соответствующих краев его родительского... из его внешнего вида у вашего контейнера нет набора высоты...

  • 0
    Да, высота 600px, то же самое для «контейнера» и «MainDiv».
0

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

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

Редактировать:

С обновленным кодом, который имеет высоту для контейнера div, список помещается внизу.

0

Попробуйте установить вертикальное выравнивание вниз.

<style>
            #MainDiv{
          background:url(../img/background.jpg) no-repeat;
          background-size:cover;
        }

            #container{
          width:980px;
          margin:0 auto;
          position:relative;
        }

        #list{
            width:260px;
        height:40px;
        position:absolute;
            left:0;
            bottom:0;
        }

       #list li{
            width:130px;
        height:40px;
        border:1px solid white;
        vertical-align:bottom;
    }
</style>

        <body>
            <div id="MainDiv">

                <div id="container">
                   <ul id="list">
                      <li id="image1>Example1</li>
                      <li id="image2>Example2</li>
                   </ul>
                </div>

            </div>
  • 0
    Вы проверяли это?
  • 0
    Да, только что проверил, и он все тот же. Спасибо за помощь, хотя.
0

Когда вы добавляете высоту в контейнер, она перемещает ваш <ul> в нижнюю часть div. Фактически, он всегда находится в нижней части div, но поскольку высота div равна 0, это не похоже на то, что оно находится внизу.

http://jsfiddle.net/s5aE3/

#container{
  width:980px;
  margin:0 auto;
  position:relative;
  height: 800px;
}
  • 0
    Блин ... иногда я глупый ... Я добавил относительную позицию в "MainContainer", а не в "Container". Работает отлично! Спасибо!
  • 0
    Нет проблем. Рад помочь!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню