- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдоколонки на градиентах</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container columns">
<div class="left">
<p>В левой колонке текст одной длины, а в правой колонке — другой. Так как соседние блоки не могут знать о высоте друг друга, то и выровнять их по высоте не получится. Это недостаток блочной модели.</p>
</div>
<div class="right">
<p> Но можно подложить под них фон, того же цвета, что и их собственный, чтобы создалась иллюзия, что колонки одинаковые.</p>
</div>
</div>
</body>
</html>
CSS
body {
font-family: "PT Sans", sans-serif;
}
.columns {
background-image: none;
}
.container {
margin: 20px auto;
min-height: 380px;
width: 300px;
box-shadow: 1px 1px 3px #333333;
color: white;
}
.container::after {
display: table;
clear: both;
content: "";
}
.left {
float: left;
width: 45%;
background-color: #e74c3c;
}
.right {
float: right;
width: 45%;
background-color: #3498db;
}
p {
margin: 10px 0;
padding: 0 10px;
}
Вы перешли на другую страницу
ЗадачиВыполнено
0
- Для
.columns
задайте линейный градиент слева направо из шести цветов:#e74c3c
,#e74c3c
,transparent
,transparent
,#3498db
,#3498db
. Да, цвета повторяются по два раза. - Затем задайте второму и третьему цвету позицию
45%
, а четвёртому и пятому55%
. - Затем увеличьте ширину
.container
до400px
. - И, наконец, добавьте класс
columns
дляbody
.