Введение
Узнайте, как создать разделенный экран (50/50) с помощью HTML и CSS.
Разделенный экран 50/50
Интерактивная демонстрация верстки с разделенным экраном. Левая часть темная с женским аватаром, правая - красная с мужским аватаром.
Создать разделенный экран 50/50
Шаг 1) Добавить HTML:
Пример HTML для разделенного экрана
<div class="split left">
<div class="centered">
<img src="img_avatar2.png"
alt="Портрет женщины"
width="150"
height="150"
loading="lazy">
<h2>Щипунова Таня</h2>
<p>Текст описания</p>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="img_avatar.png"
alt="Портрет мужчины"
width="150"
height="150"
loading="lazy">
<h2>Щипунов Андрей</h2>
<p>Текст описания</p>
</div>
</div>
Шаг 2) Добавить CSS:
Пример CSS для разделенного экрана
/* Разделить экран пополам */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Левая сторона */
.left {
left: 0;
background-color: #111;
}
/* Правая сторона */
.right {
right: 0;
background-color: red;
}
/* Центрирование содержимого */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Стиль изображения */
.centered img {
width: 150px;
border-radius: 50%;
}