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

Question 1

Я пытаюсь выровнять дочерний тег 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 с разной высотой, и мне нужно, чтобы все они выровнялись по базовой линии / низу.

Question 2

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

#parentDiv {
  position: relative;
}

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

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

Question 3

Семь лет спустя поиски вертикального выравнивания все еще вызывают этот вопрос, поэтому я опубликую еще одно решение, которое у нас есть сейчас: позиционирование 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
}

Question 4

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

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

Question 5

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

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

Question 6

Ответ, опубликованный Я. Шохамом (с использованием абсолютного позиционирования), кажется самым простым решением в большинстве случаев, когда контейнер имеет фиксированную высоту, но если родительский 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>

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

Question 7

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

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

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

Question 8

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

HTML

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

CSS

parentDiv{

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

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

Question 9

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

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

Question 10

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>

Развернуть фрагмент

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

Question 11

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

.Parent div
{
  vertical-align : bottom;
}

Answer 1

Я пытаюсь выровнять дочерний тег 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 с разной высотой, и мне нужно, чтобы все они выровнялись по базовой линии / низу.

Answer 2

даже не думал! Я только что удалил высоту для parentDiv, и все childDiv теперь находятся на базовой линии. Я просто глупая выходка!

sia

Answer 3

Но если вы хотите, чтобы у него была определенная высота - вы должны использовать absoluteпозиционирование по родителю.

Y. Shoham

Answer 4

159

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

#parentDiv {
  position: relative;
}

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

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

Ю. Шохам
источник

7

Я сомневаюсь, что это делает то, что он хочет, в настоящее время это расположит все (похоже, будет несколько дочерних элементов, если это динамическая гистограмма) друг над другом.

crmepham

Answer 5

7

Я сомневаюсь, что это делает то, что он хочет, в настоящее время это расположит все (похоже, будет несколько дочерних элементов, если это динамическая гистограмма) друг над другом.

crmepham

Answer 6

54

Семь лет спустя поиски вертикального выравнивания все еще вызывают этот вопрос, поэтому я опубликую еще одно решение, которое у нас есть сейчас: позиционирование 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
}

Gcbenison
источник

1

Просто. Именно то, что я хотел. Используйте, align-items: flex-start;если вы не хотите растягивать предметы.

Madhan

Это лучший ответ на сегодняшний день!

Ренс Гроенвельд,

justify-content: flex-end исчезает из моей полосы прокрутки

kta

Answer 7

1

Просто. Именно то, что я хотел. Используйте, align-items: flex-start;если вы не хотите растягивать предметы.

Madhan

Answer 8

Это лучший ответ на сегодняшний день!

Ренс Гроенвельд,

Answer 9

justify-content: flex-end исчезает из моей полосы прокрутки

kta

Answer 10

12

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

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

Romiem
источник

1

Для столько дерьма, сколько таблиц, иногда это лучшее решение

Sean256 03

это было лучшее решение для меня

Bowlerae

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

hamncheez

Answer 11

1

Для столько дерьма, сколько таблиц, иногда это лучшее решение

Sean256 03

Answer 12

это было лучшее решение для меня

Bowlerae

Answer 13

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

hamncheez

Answer 14

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

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

Answer 15

Ответ, опубликованный Я. Шохамом (с использованием абсолютного позиционирования), кажется самым простым решением в большинстве случаев, когда контейнер имеет фиксированную высоту, но если родительский 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>

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

Answer 16

3

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

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

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

Равия
источник

Я пробовал это, но мне нужно, чтобы нижняя часть childDiv располагалась внизу parentDiv, график должен быть динамическим, а высота будет варьироваться от каждого childDiv к следующему ... позиционирование может работать, но у меня нет бросить выяснил кое-что твердое ...

sia

5

не рекомендуется устанавливать верхнее значение 207 (какое-то произвольное число), лучше установить нижнее значение: 0

pstanton 06

Answer 17

Я пробовал это, но мне нужно, чтобы нижняя часть childDiv располагалась внизу parentDiv, график должен быть динамическим, а высота будет варьироваться от каждого childDiv к следующему ... позиционирование может работать, но у меня нет бросить выяснил кое-что твердое ...

sia

Answer 18

5

не рекомендуется устанавливать верхнее значение 207 (какое-то произвольное число), лучше установить нижнее значение: 0

pstanton 06

Answer 19

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

HTML

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

CSS

parentDiv{

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

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

Answer 20

Это сделает childDiv половиной внизу parentDiv. Вам нужно как минимум использовать -40 пикселей на верхнем поле. Также рекомендуется использовать position: relative; в этом случае для обоих div.

Augus

Answer 21

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

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

Answer 22

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>

Развернуть фрагмент

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

Answer 23

-6

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

.Parent div
{
  vertical-align : bottom;
}

Pawan
источник

Почему так много "против" без комментариев? Это не решает проблему? Исследования в Интернете показывают, что это необходимо.

sholsapp

Answer 24

Почему так много "против" без комментариев? Это не решает проблему? Исследования в Интернете показывают, что это необходимо.

sholsapp

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

Ответы: