Выровнять DIV до нижней или базовой линии

Я пытаюсь выровнять тег дочернего div в нижней или базовой линии тега родительского div.

Все, что я хочу сделать, это иметь дочерний Div в начале исходного Div, вот что он теперь выглядит:

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

Примечание

У меня будет несколько childDiv с разной высотой, и мне понадобятся все они для выравнивания к базовой линии/внизу.

Ответы

Ответ 1

Вам нужно добавить следующее:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

При объявлении элемента absolute он позиционируется в соответствии с его ближайшим родителем, который не является static (он должен быть absolute, relative или fixed).

Ответ 2

Используйте отображаемые значения CSS для таблицы и таблицы:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

Я создал демо JSBin здесь: http://jsbin.com/INOnAkuF/2/edit

В демонстрации также есть пример, как выравнивать по центру по центру, используя ту же технику.

Ответ 3

это работает (я тестировал только ie и ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

надеюсь, что это поможет.

Ответ 4

Семь лет спустя поиск вертикального выравнивания все еще вызывает этот вопрос, поэтому я отправлю еще одно решение, которое у нас есть для нас: flexbox позиционирование. Просто установите display:flex; justify-content: flex-end; flex-direction: column в родительский div (продемонстрированный в этом fiddle):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

Ответ 5

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

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id="container">
    <div id="top">Dynamic content aligned to top of #container</div>
    <div id="bottom">Dynamic content aligned to botttom of #container</div>
</div>

Пример

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

Ответ 6

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

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

Css

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

И это просто спустит этот нижний div обратно в родительский div. безопасно для большинства браузеров.

Ответ 7

Вам, вероятно, пришлось бы установить дочерний div для position: absolute.

Обновите свой детский стиль до

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

Ответ 8

У меня было что-то похожее и получилось эффективно работать с добавлением дочернего элемента padding-top.

Я уверен, что некоторые из других ответов здесь найдут решение, но я не мог заставить их легко работать после много времени; Вместо этого я получил решение padding-top, которое элегантно по своей простоте, но выглядит для меня хакерским (не говоря уже о том, что значение пикселя, которое он устанавливает, вероятно, будет зависеть от высоты родителя).

Ответ 9

Если у вас есть несколько дочерних Div внутри родительского Div, вы можете использовать свойство vertical-align, как показано ниже:

.Parent div
{
  vertical-align : bottom;
}