Задание №13 - Цветные Блоки. Подскажите, что я не доделал.

Курсы §15. Сетки
1

Расположил блоки почти как на картинке:

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

Получилось вот что:

Что нужно сделать еще для выполнения задания? Желательно объяснить почему именно так, если не трудно.
P.S. Добился выполнения задания, присвоив верхнему зеленому блоку в html <style="float: right">. Но я не думаю, что это правильный шаг.

2

У вас в коде два зеленых блока. Это блок7 и блок8. Для одного прописано свойство float: right;
Для другого - float: left;
Вам лишь необходимо поменять их местами в HTML-коде. Блок7 (для которого уже прописано float: right; а значит не нужно переопределять его положение с помощью тэга <style> ) будет вторым по счету, а блок8 будет предпоследним.

3 лайка
3

Спасибо за помощь. В следующий раз постараюсь быть внимательней. Моя ошибка была в том, что я на css код даже не смотрел… Просто перебирал блоки, вместо того, что бы разобраться где что.

1 лайк
4

Вот так можно сделать без переопределения стилей. Но я долго потел над тем чтобы сдвинуть .block1 на клетку вниз.

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