Сетки / Испытание: пазл на флоатах [13/32]

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения.

Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью

ВК ВКонтакте или FB Facebook

×
Курс «Сетки»

Испытание: пазл на флоатах [13/32]

В качестве первого испытания мы подготовили небольшую головоломку. Суть её такова:

Все стили готовы к использованию, а редактор CSS заблокирован.
Но вы можете изменять HTML.
Задача заключается в том, чтобы правильно подобрать порядок блоков.

Конечно, головоломка сделана таким образом, чтобы вы прочувствовали все тонкости поведения флоатов. Обратите внимание, что среди блоков есть не зафлоаченный блок. И это не ошибка.

Напомним об одной тонкости: для того, чтобы флоатный блок мог обтекаться обычным, он должен в коде располагаться выше обычного.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Испытание: пазл на флоатах</title> <meta charset="utf-8"> </head> <body> <div class="puzzle"> <!-- Вставляйте дивы с классами от block1 до block8 в определённом порядке <div class="block1"></div> --> </div> </body> </html>
CSS
html, body { margin: 0; padding: 0; } body { width: 400px; height: 300px; } .puzzle { width: 300px; margin: 0 auto; padding-top: 5px; } .puzzle div { margin-right: 5px; margin-bottom: 5px; } .block1 { float: left; width: 70px; height: 220px; background: #3498db; } .block2 { float: right; width: 220px; height: 70px; background: #3498db; } .block3 { width: 70px; height: 70px; background: #8e44ad; } .block4 { float: left; width: 70px; height: 145px; background: #e74c3c; } .block5 { float: right; width: 70px; height: 145px; background: #e74c3c; } .block6 { float: right; width: 70px; height: 70px; background: #f1c40f; } .block7 { float: right; width: 145px; height: 70px; background: #2ecc71; } .block8 { float: left; width: 145px; height: 70px; background: #2ecc71; }
<HTML Academy>
?

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.