Выровняйте 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;
}

Заметка

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

Вам нужно добавить это:

#parentDiv {
  position: relative;
}

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

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

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

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

Используйте отображаемые значения 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

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

это работает (я тестировал только 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>

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

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

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>

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

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

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

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

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

HTML

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

CSS

parentDiv{

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

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

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

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

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

Это мое решение

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

.Parent div
{
  vertical-align : bottom;
}