Как выровнять div-элементы бок о бок
CSS позволяет выровнять div-элементы разными способами. Ниже мы представим несколько распространенных способов для этого.
Тег <div> используется, чтобы указать части страницы или документа. Он используется для группировки больших разделов HTML-элементов и добавления к ним стилей с помощью CSS. Три или больше разных div-элементов могут быть расположены бок о бок с помощью CSS.
Рассмотрим пример и попробуем вместе разобраться с каждой частью кода.
1. Создайте HTML
- Создайте тег <main> в разделе <body> с id “boxes”, который должен содержать наши div.
- Создайте элементы <div>. Для первого <div> мы используем id с названием ”column1”, для второго - id “column2”, а для третьего - “column3”.
- Можно добавить заголовки для div, используя тег <h2>.
<body>
<div id="boxes">
<h2>W3 docs</h2>
<div id="column1">
<h2>What is Lorem Ipsum?</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div id="column2">
<h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div id="column3">
<h2>Where does it come from?:</h2>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cities of the word in classical literature, discovered the undoubtable source.
</div>
</div>
</body>2. Добавьте CSS
- Используйте свойство float, чтобы указать, на какой стороне контейнера должны быть расположены элементы. Свойство float имеет три значения: none, left и right. В нашем примере мы использовали значение left для divs.
- Можно выбрать цвет для фонов с помощью свойства background-color. Здесь мы используем значения hex для фонов.
- Задайте размер вашего div с помощью CSS свойств width и height.
- Задайте положение заголовков с помощью свойства text-align.
- Используйте CSS свойство clear, которое непосредственно связано со свойством float. Оно указывает, должен ли элемент находиться рядом с плавающими элементами или под ними (clear).
- Используйте свойство content. Это свойство используется вместе с псевдоэлементами ::before и ::after для создания контента внутри элемента.
- Используйте свойство display, с помощью которого элемент реагирует как HTML-элемент <table>>.
Свойство float игнорируется, если элементы абсолютно позиционированы (position: absolute).
#boxes{
content: "";
display: table;
clear: both;
}
div{
float:left;
height:470px;
width:23%;
padding:0 10px;
}
#column1{
background-color: #a1edcc;
}
#column2{
background-color:#a0e9ed;
width:43%;
}
#column3{
background-color:#f497f1;
}
h2{
color: #000000;
text-align:center;
}Соединим части кода и увидим, как он работает!
Результат нашего кода.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
#boxes{
content: "";
display: table;
clear: both;
}
div{
float:left;
height:470px;
width:23%;
padding:0 10px;
}
#column1{
background-color: #a1edcc;
}
#column2{
background-color:#a0e9ed;
width:43%;
}
#column3{
background-color:#f497f1;
}
h2{
color: #000000;
text-align:center;
}
</style>
</head>
<body>
<main id="boxes">
<h2>W3docs</h2>
<div id="column1">
<h2>What is Lorem Ipsum?</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div id="column2">
<h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div id="column3">
<h2>Where does it come from?:</h2>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cities of the word in classical literature, discovered the undoubtable source.
</div>
</main>
</body>
</html>Рассмотрим другой пример.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.container {
width:600px;
height:190px;
background-color: #5cbbf2;
padding: 35px 15px 5px;
}
.container:before,
.container:after {
content:"";
display:table;
clear: both;
}
.container div{
float:left;
width:180px;
height:160px;
}
#box2{
background-color: #000000;
margin-left:30px;
margin-right:30px;
}
p {
color: white;
padding:5px 10px;
text-align:center;
}
</style>
</head>
<body>
<h2>W3docs</h2>
<div class="container">
<div id="box1">
<img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1"
style="width:180px; height:160px;">
</div>
<div id="box2">
<p> Мы можем создать бок о бок столько div, сколько хотим, с одинаковой высотой, а также с разной высотой. </p>
</div>
<div id="box3">
<img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1"
style="width:180px; height:160px;">
</div>
</div>
</html>В этом примере мы использовали CSS свойства padding, margin. Свойство padding создает отступ со всех сторон контента элемента. Свойство margin добавляет пространство между элементами. Можете также выбрать для текста любой цвет из инструмента Выбор цвета.
Давайте рассмотрим другой пример.
Пример
<!DOCTYPE html>
<html>
<title>Заголовок документа</title>
<head>
<style>
.box{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 310px;
height:310px;
border:2px solid green;
}
.box div {
width:100px;
padding:15px;
text-align:center;
color:#000000;
font-family: arial, sans-serif;
}
.green {background-color: green;}
.blue {background-color: blue;}
.gray {background-color: gray;}
.pink {background-color: pink;}
</style>
</head>
<body>
<h2>Пример свойства flex</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
<div class="pink">PINK</div>
</div>
</body>
</html>Здесь мы использовали свойство display со значением "flex". Свойство display указывает тип блока, который используется для HTML-элемента. Значение "flex" отображает элемент в виде flex-контейнера блочного уровня.
Рассмотрим другой пример.
Результат нашего кода.
<!DOCTYPE html>
<html>
<title>Заголовок документа</title>
<head>
<style>
.box div {
width:100px;
display:inline-block;
padding:15px;
text-align:center;
color:#000000;
font-family: arial, sans-serif;
}
.green {background-color: green;}
.blue {background-color: blue;}
.gray {background-color: gray;}
.pink {background-color: pink;}
.yellow {background-color: yellow;}
</style>
</head>
<body>
<h2>Пример свойства flex</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
<div class="pink">PINK</div>
<div class="yellow">YELLOW</div>
</div>
</body>
</html>В этом примере мы использовали свойство display со значением "inline-block". Значение "Inline-block" отображает элемент в виде блочного контейнера в строчном уровне. Мы использовали свойство font-family, которое позволяет создать список приоритетных названий font family и/или общее название для выбранных элементов.