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

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
06.08.2013

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

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

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

<div id="parent">
<div id="child">Текст дочернего элемента</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 id="parent">
<div id="child">Текст дочернего элемента</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 id="parent">
    <div id="child">Текст дочернего элемента 1</div>
    <div id="child2">Текст дочернего элемента 2</div>
    <div id="child3">Текст дочернего элемента 3</div>
    </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 id="parent">
    <div id="child">Текст дочернего элемента 1</div>
    <div id="child2">Текст дочернего элемента 2</div>
    <div id="child3">Текст дочернего элемента 3</div>
    </div>

    Результат:

    CSS свойство left

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

    Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №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 id="parent">
    <div id="child">Текст дочернего элемента 1</div>
    <div id="child2">Текст дочернего элемента 2</div>
    <div id="child3">Текст дочернего элемента 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 id="parent">
    <div id="child">Текст дочернего элемента 1</div>
    <div id="child2">Текст дочернего элемента 2</div>
    <div id="child3">Текст дочернего элемента 3</div>
    </div>

    Результат:

    vertical-align

    Заметки:

    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 id="parent">
    <div id="child">Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div>
    <div id="child2">Мало текста, мало текста. Текст дочернего элемента 2</div>
    <div id="child3">Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div>
    </div>

    Результат:

    top

    Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство 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 id="parent">
    <div id="child">Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div>
    <div id="child2">Мало текста, мало текста. Текст дочернего элемента 2</div>
    <div id="child3">Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div>
    </div>

    Результат:

    результат

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

    С уважением, .
    Пожалуйста, оцените эту статью
    Средняя оценка: 4.33 из 5 (проголосовало: 80)
    Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

    Ваш email:
    Вы можете помочь развитию проекта, сделав всего 1 клик:
    Спасибо!
    Пожалуйста, прокомментируйте, как Вам моя статья?
    Имя:
    Комментарий:

    Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

    Подписаться на новые комментарии:

    E-mail:


    Защита от спама: у треугольника три...
    Ответ:
    Подписаться на новые комментарии без комментирования - Email:
    Защита от спама: у треугольника три...
    Ответ:

    18.03.2014 11:56:37 guard:
    Отличная подача материала. И, главное, все работает

    Ответить на комментарий


    25.04.2014 10:10:24 Кирилл:
    Ничего что vertical-align работает только для ячеек таблицы? :)
    12.05.2014 17:57:21 Сергей отвечает:
    Ничего подобного. Работает и для inline-block элементов, выравнивает их относительно друг друга.

    Ответить на комментарий


    12.05.2014 17:50:40 alex:
    2Кирилл

    vertical-align : "Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы"

    Ключевое слово ИЛИ

    Ответить на комментарий


    10.08.2014 23:27:01 Рома:
    Не получается у меня эта практика с выравниванием блока внутри блока в нижней его части. В общем блоке - текст. В встроенном блоке - текст.
    Встроенный блок должен дополнять я не строить "аппликацию" поверх родителя.
    Не понимаю как сделать всё с двумя встроенными блоками. Один выше другого, другой выравнивается по-низу. Блоки не накладываются.

    Ответить на комментарий


    19.11.2014 11:57:11 Дмитрий:
    Спасибо, все просто и доступно. Вроде инфы в сети хватает но тут все агрегировано и как упоминалось выше работает)

    Ответить на комментарий


    13.11.2015 18:41:29 юзер:
    Большущее спасибо! Очень помогла статья!!!

    Ответить на комментарий


    11.12.2015 11:58:50 Владимир:
    Спасибо за статью, хоть кто то норм пояснил, среди этого безмерного шлака..

    Ответить на комментарий


    07.02.2016 18:58:59 botva:
    спасибо, очень помогло.
    про то, что свойство float нельзя использовать в сочетании с вертикальным выравниванием поздно прочитал, поэтому заюзал.
    но у меня все сработало как я и хотел прижалось к верхнему правому краю и работает на разных разрешениях.
    vertical-align:top;
    float: right;

    Ответить на комментарий


    17.08.2016 19:52:44 Юля:
    Спасибо огромное =) пару дней ломала голову, а оказывается все так просто =)

    Ответить на комментарий

    Использую для работы
    Мои расширения
    Свежие статьи
    Рекомендую
    Горячо обсуждаемые
    Подписка
    • Следовать в twitter:
    • Подписаться по RSS:
    • Подписаться по E-mail:
    • Следить ВКонтакте:
    • Следить на Facebook:
    Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
    Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
    © site-on.net
    Шрифт: +стандартно-