Теория
Теория

Псевдоколонки на градиентах

Одна из интересных задач вёрстки — как сверстать тянущиеся колонки одинаковой высоты без использования таблиц? Проблема эта связана с особенностями поведения блочной модели и проиллюстрирована на картинках ниже:

Проблема в поведении блоков в раскладке Желаемое поведение блоков в раскладке

Для решения этой задачи существует несколько приёмов, которые описаны в этой статье на английском. Кстати, картинки тоже взяты оттуда.

Давайте применим приём с использованием градиентов с резкими переходами, которые имитируют тянущиеся колонки. Фон с такими градиентами обычно размещают в контейнере колонок. Пропорции градиентов подбирают такими же, как и пропорции колонок, чтобы они тянулись одинаково.

Эффекта, приведённого в задании, проще достичь с помощью флексбоксов.

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; }

ЗадачиВыполнено

Для .columns задайте линейный градиент слева направо из шести цветов: #e74c3c, #e74c3c, transparent, transparent, #3498db, #3498db. Да, цвета повторяются по два раза.
Затем задайте второму и третьему цвету позицию 45%, а четвёртому и пятому 55%.
Затем увеличьте ширину .container до 400px.
И, наконец, добавьте класс columns для body.

Псевдоколонки на градиентах

Вход

Регистрация

Восстановление доступа