Как выровнять контент div по нижней границе
CSS позволяет выровнять контент <div> по нижней границе с помощью специальных методов. Можно также выровнять контент по верхней границе <div>, по левой или правой стороне нижней границы. Рассмотрим все возможные варианты. Следуйте приведенным ниже шагам.
Рассмотрим пример и попробуем вместе разобраться с каждой частью кода.
1. Создайте HTML
- Создайте <div> с классом “main”. Он включает три других div.
- Разместите тег <h2> в первом div, который имеет название класса “column1”, напишите в нем контент.
- Второй <div> имеет класс с названием “column2”.
- Третий <div> имеет id с названием “bottom”.
<body>
<div class="main">
<div class=“column1”>
<h2>W3docs</h2>
</div>
<div class=“column2”>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</div>
<div id="bottom">Нижний контент Div</div>
</div>
</body>
2. Добавьте CSS
- Используйте свойства border, float, height, width, position для добавления стиля к классу "main". Свойство float указывает, с какой стороны контейнера должны находиться элементы. Свойство position указывает положение элемента в документе.
- Установите color для текста первого <div>. В этом примере мы использовали значение hex для color.
- Используйте свойство text-align для выравнивания внутреннего контента блочного элемента.
- Используйте свойства bottom и left. Свойство bottom указывает для элемента нижнее позиционирование вместе со свойством position. Свойство left указывает левое позиционирование элемента вместе со свойством position.
.main {
border: 1px solid #4287f5;
float: left;
height: 180px;
width: 500px;
position: relative;
}
.column1{
color: #4287f5;
text-align:center;
}
.column2{
text-align:center;
}
#bottom {
position: absolute;
bottom:0;
left:0;
}
Давайте соединим части кода и посмотрим, как он работает!
Результат нашего кода
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.main {
border: 1px solid #4287f5;
float: left;
height: 180px;
width: 500px;
position: relative;
}
.column1{
color: #4287f5;
text-align:center;
}
.column2{
text-align:center;
}
#bottom {
position: absolute;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div class="main">
<div class="column1">
<h2>W3docs</h2>
</div>
<div class="column2">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</div>
<div id="bottom">Нижний контент Div</div>
</div>
</body>
</html>
Рассмотрим другой пример, где контент div выравнивается по правой стороне нижней границы.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.main {
border: 1px solid #4287f5;
float: left;
height: 180px;
width: 500px;
position:relative;
}
.column1 {
color: #4287f5;
text-align:center;
}
.column2 {
text-align:center;
}
#bottom {
position:absolute;
bottom:0;
right:0;
}
</style>
</head>
<body>
<div class="main">
<div class="column1">
<h2>W3docs</h2>
</div>
<div class="column2">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</div>
<div id="bottom">Нижний контент Div</div>
</div>
</body>
</html>
Рассмотрим другой пример, где контент div выравнивается по центру нижней границы.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.main {
border: 1px solid #4287f5;
float: left;
height: 180px;
width: 500px;
position: relative;
}
.column1{
color: #4287f5;
text-align:center;
}
.column2{
text-align:center;
}
#bottom {
position: absolute;
bottom:0;
width:100%;
text-align:center;
color:#ffffff;
background-color: blue;
padding:15px 0;
}
</style>
</head>
<body>
<div class="main">
<div class="column1">
<h2>W3docs</h2>
</div>
<div class="column2">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</div>
<div id="bottom">Нижний контент Div</div>
</div>
</body>
</html>
В этом примере мы задали 100% для width нижнего div.
Рассмотрим пример, где контент div выравнивается по центру с помощью flexbox. Flexbox - это одномерный макет, т.е. элементы расположены в виде строк или столбцов. В следующем примере мы использовали свойство flex-direction со значением "column". Свойство flex-direction указывает главную ось flex-контейнера и определяет порядок отображения флекс-элементов. Свойство justify-content выравнивает элементы, когда они не используют все доступное пространство по горизонтали. Значение "space-between" используется со свойством justify-content, когда доступно пространство между строками элементов.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
main {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h2 {
margin: 0;
}
</style>
</head>
<body>
<main>
<h2>Header title</h2>
Текст, выровненный по нижней границе
</main>
</body>
</html>
Рассмотрим другой пример, где использовано CSS свойство align-items. Оно указывает выравнивание по умолчанию для флекс-элементов. Это похоже на свойство justify-content, но является его вертикальной версией.
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
main {
border: 1px solid green;
background-color:green;
color:#ffffff;
padding:20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
flex-direction:column;
}
h2 {
margin: 0;
}
p{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
margin:0;
}
</style>
</head>
<body>
<main>
<h2>Header title</h2>
<p>Текст, выровненный по нижней границе</p>
</main>
</body>
</html>
Давайте рассмотрим другой пример, где использовано свойство position. В нашем первом примере мы также использовали свойство position со значением "relative" для HTML-тега <main>, а значение "absolute" было использовано для нижнего div.
В этом примере мы используем свойство span class="property">position со значением "fixed" для <div>. Свойство z-index указывает порядок элементов и потомков, или флекс-элементов по оси z.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
* {
margin: 0;
padding: 0;
}
main{
position:relative;
}
div{
background-color: yellow;
height: 200px;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
border-top: 2px solid gold;
}
</style>
</head>
<body>
<main>
<h2>This is the header
</h2>
<div>Текст, выровненный по нижней границе</div>
</main>
</body>
</html>