x
<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>