Вирівняйте DIV за нижньою або базовою лінією

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

Все, що я хочу зробити, це мати дочірню Div на базовій лінії Parent 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, вирівняний до нижньої частини, був вищим, він не змінює розмір контейнера, а виходить за межі . Метод, викладений вище 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>

Я розумію, що це не нова відповідь, але я хотів прокоментувати цей підхід, оскільки він змусив мене знайти своє рішення, але як новачкові мені не дозволили коментувати, лише допис.

Ймовірно, вам довелося б встановити дочірній 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, яке елегантне своєю простотою, але здається мені якимсь хакерським (не кажучи вже про значення пікселя, яке воно встановлює, можливо, залежало б від батьківської висоти).

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, тоді ви можете використовувати властивість вертикального вирівнювання приблизно так, як показано нижче:

.Parent div
{
  vertical-align : bottom;
}