Как сделать - Разделенный экран 1/2
Узнать, как создать разделенный экран (50/50) с помощью CSS.
Редактор кода »
Разделенный экран
Шаг 1) Добавить HTML:
Пример
<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="Аватар женщина">
<h2>Щипунова Татьяна</h2>
<p>Некоторый текст.</p>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="img_avatar.png" alt="Аватар мужчина">
<h2>Щипунов Андрей</h2>
<p>Некоторый текст here too.</p>
</div>
</div>
Шаг 2) Добавить 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%;
}
Редактор кода »