Как я могу расположить мой div на дне его контейнера? - PullRequest
671 голосов
/ 08 февраля 2009

С учетом следующего HTML:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Я бы хотел, чтобы #copyright придерживался дна #container.

Можно ли добиться этого без использования абсолютного позиционирования? Если бы свойство float поддерживало значение 'bottom', похоже, это бы сработало, но, к сожалению, это не так.

Ответы [ 21 ]

0 голосов
/ 30 августа 2013

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

Мне нужно было создать панель навигации, в которой были бы реальные ссылки в правом нижнем углу, и элементы случайных элементов, в то же время следя за тем, чтобы сама панель растягивалась правильно, не нарушая компоновку. Я использовал элемент shadow, чтобы занять пространство ссылок панели навигации, и добавил его в конец дочерних узлов контейнера.


<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...