Как прижать элемент к низу или верху родительского элемента
"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог
info@site-on.net
от практика с многолетним опытом." — блог
info@site-on.net
Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, 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>
Для красоты и наглядности я сделал дочерний элемент квадратным:
Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию 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 разную велечину 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>
Результат:
Вроде всё отлично, зачем же нам делать как-то по-другому? Во-первых, как я уже говорил, для других элементов на странице наших абсолютно позиционированных блоков с текстом просто не существует, это может поломать вашу вёрстку.
Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:
Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:
<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>
Результат:
Заметки:
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>
Результат:
Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство 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>
Результат:
Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!
Пожалуйста, прокомментируйте, как Вам моя статья?