Выполнить »
×
Изменить ориентацию
Открыть на Codepen
Изменить тему, Темная/Светлая
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } /* Создайте четыре равных столбца, которые плавают рядом друг с другом */ .column { float: left; width: 25%; padding: 20px; } /* Очистить float после столбцов */ .row:after { content: ""; display: table; clear: both; } /* На экранах шириной 992 пикселя или меньше переходите с четырех столбцов на два столбца */ @media screen and (max-width: 992px) { .column { width: 50%; } } /* На экранах шириной 600 пикселей или меньше расположите столбцы друг над другом, а не рядом */ @media screen and (max-width: 600px) { .column { width: 100%; } } </style> </head> <body> <h2>Адаптивный четырехколоночный макет</h2> <p><strong>Измените размер окна браузера, чтобы увидеть эффект реагирования.</strong> На экранах шириной 992 пикселя или меньше размер столбцов изменится с четырех до двух. На экранах шириной 600 пикселей или меньше столбцы будут располагаться друг над другом, а не рядом друг с другом.</p> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Столбец 1</h2> <p>Какой-то никчемный текст..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Столбец 2</h2> <p>Вообще ненужный текст..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Столбец 3</h2> <p>В этом тексте тоже нет смысла..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Столбец 4</h2> <p>А меня совсем не надо читать..</p> </div> </div> </body> </html>
