Испытание: пазл на флоатах

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

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

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

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

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

<!DOCTYPE html>
<html>
  <head>
    <title>Испытание: пазл на флоатах</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="puzzle">
      <div class="block5"></div>
      <div class="block7"></div>
      <div class="block3"></div>
      <div class="block1"></div>
      <div class="block6"></div>
      <div class="block4"></div>
      <div class="block8"></div>
      <div class="block2"></div>
    </div>
  </body>
</html>

Притормози, дружище

Проходить вызовы части «Сетки на флоатах и блочно-строчных» тренажёра «Ретросетки» можно после регистрации и оформления подписки.

Зарегистрироваться