Содержание

Как прижать элемент к низу или верху родительского элемента — Site on!

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

06.08.2013

Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, div к низу другого div. Всё дело в том, что по одноименному запросу в своё время я не смог найти нужных мне ответов, поэтому сейчас я расскажу вам обо всех возможных способах сделать это.

Допустим, у нас есть 2 элемента на странице, неважно какие именно, для примера возьмём 2 div. Один из них будет вложен в другой, причём высота родителя будет больше высоты ребёнка:

<style>
#parent{
	background:black;
	height:300px;
}
#child{
	background:red;
	height:100px;
	width:100px;
}
</style>

<div>
<div>Текст дочернего элемента</div>
</div>

Для красоты и наглядности я сделал дочерний элемент квадратным:

Способ №1. Абсолютное позиционирование

Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:

<style>
#parent{
	position:relative; /* добавили */
	background:black;
	height:300px;
}
#child{
	position:absolute; /* добавили */
	bottom:0; /* добавили */
	background:red;
	height:100px;
	width:100px;
}
</style>

<div>
<div>Текст дочернего элемента</div>
</div>

Результат:

Плюсы:

  • Простота

    • Минусы:

  • При абсолютном позиционировании другие элементы на странице ведут себя так, будто элемента с абс. позиционированием не существует.

    • Это значит что в таком случае:

    <style>
#parent{
	background:black;
	height:300px;
}
#child,#child2,#child3{
	display:inline-block; /* Сделали все div в одну строку */
	height:100px;
	width:100px;
}
#child{
	background:red;
}
#child2{
	background:yellow;
}
#child3{
	background:green;
}
</style>

<div>
<div>Текст дочернего элемента 1</div>
<div>Текст дочернего элемента 2</div>
<div>Текст дочернего элемента 3</div>
</div>

    Результат:

    После проделанного выше способа получиться следующее:

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

    Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:

    <style>
#parent{
	position:relative; /* добавили */
	background:black;
	height:300px;
}
#child,#child2,#child3{
	position:absolute; /* добавили */
	bottom:0; /* добавили */
	height:100px;
	width:100px;
}
#child{
	left:0; /* добавили */
	background:red;
}
#child2{
	left:110px; /* добавили */
	background:yellow;
}
#child3{
	left:220px; /* добавили */
	background:green;
}
</style>

<div>
<div>Текст дочернего элемента 1</div>
<div>Текст дочернего элемента 2</div>
<div>Текст дочернего элемента 3</div>
</div>

    Результат:

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

    Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:

  • Знать точное количество блоков;
  • Для каждого блока рассчитать и написать координату left;
  • Если со временем мы решим добавить ещё блоков, нам опять-таки придётся снова для каждого нового блока указывать свойство left.

    • Способ №2. Вертикальное выравнивание

    Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:

    <style>
#parent{
	background:black;
}
#child,#child2,#child3{
	display:inline-block;
}
#child{
	background:red;
	height:300px;
	width:100px;
}
#child2{
	background:yellow;
	height:100px;
	width:100px;
}
#child3{
	background:green;
	height:200px;
	width:100px;
}
</style>

<div>
<div>Текст дочернего элемента 1</div>
<div>Текст дочернего элемента 2</div>
<div>Текст дочернего элемента 3</div>
</div>

    Результат:

    Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:

    <style>
#parent{
	background:black;
}
#child,#child2,#child3{
	vertical-align:bottom; /* вот она */
	display:inline-block;
}
#child{
	background:red;
	height:300px;
	width:100px;
}
#child2{
	background:yellow;
	height:100px;
	width:100px;
}
#child3{
	background:green;
	height:200px;
	width:100px;
}
</style>

<div>
<div>Текст дочернего элемента 1</div>
<div>Текст дочернего элемента 2</div>
<div>Текст дочернего элемента 3</div>
</div>

    Результат:

    Заметки:

    1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.
    2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.

    Как прижать элементы к верху родительского

    Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.

    Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:

    <style>
#parent{
	background:black;
}
#child,#child2,#child3{
	width:100px;
	display:inline-block;
}

#child{
	background:red;
}
#child2{
	background:yellow;
}
#child3{
	background:green;
}
</style>

<div>
<div>Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div>
<div>Мало текста, мало текста. Текст дочернего элемента 2</div>
<div>Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div>
</div>

    Результат:

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

    <style>
#parent{
	background:black;
}
#child,#child2,#child3{
	vertical-align:top; /* top */
	width:100px;
	display:inline-block;
}
#child{
	background:red;
}
#child2{
	background:yellow;
}
#child3{
	background:green;
}
</style>

<div>
<div>Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div>
<div>Мало текста, мало текста. Текст дочернего элемента 2</div>
<div>Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div>
</div>

    Результат:

    Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!

    Пожалуйста, оцените эту статью
    Средняя оценка: 4.25 из 5 (проголосовало: 142)

    Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

    Вы можете помочь развитию проекта, сделав всего 1 клик:
    Спасибо!

    site-on.net

    Простой способ прижать блок к низу на CSS