13/32

Помощь в прохождении испытания-ПАЗЗЛ
Ребята помогите, что не так? не получается сдвинуть фиолетовый квадрат.

Покажите, что уже сделали сами.

выше,спасибо

Здесь от положения одного блока зависит положение остальных.
И то, что визуально кажется, что осталось только исправить положение одного блока, в итоге меняет порядок почти всех.
Попробуйте начать сначала. Помните о подсказке в теории, что для того, чтобы возле фиолетового блока (без свойства float) были флоатные, то нужно ставить их выше по порядку.
Также вы можете выписать на листок названия блоков и их соответствующий цвет или помечать их с помощью комментария в коде, чтобы не запутаться.
Например, блок1 - “голубой вертикальный”.

5 лайков

получилось)

3 лайка

И у меня получилось. Ineska, спасибо за совет писать комментарий возле блока :smiley:

4 лайка

ну допустим написать комментарий какого цвета и расположения блок первое что мне пришло в голову - но дальше…или я ничего вобще не усвоила из пройденного материала или здесь все методом тыка делалось

Перепройти тему заново, если не помогает, найти еще материалы в свободном доступе. Бывает, что для понимания нужно другое изложение материала. Всё в ваших руках - это же самообразование.

3 лайка

забавно, что в задании нет ни одного горизонтального красного блока и ни одного вертикального зеленого.

1 лайк

Хоть убей-не понимаю,почему зеленый блок не встает в паз,ему же достаточно места, и в ряд их можно выстраивать,на примере верхних 3-х блоков,где 2 из них обтекают справа,а тут не обтекают справа…
П.с. задачу решил.

<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="block6"></div>
            <div class="block5"></div>
            <div class="block7"></div>
            <div class="block2"></div>
        </div>
    </body>
</html>

тут у вас два 5-х блока и нет 4-го

Да,вот я и спрашиваю,почему с 4 блоком работает,а 5 нет.

у 4 и 5 разный флоат, + тут два 7-х блока, надо использовать 1-8 блоки, решение есть и даже 2 варианта как мне показалось из форума в итоге

У меня так тоже получилось :slight_smile:

начинать надо с верхних правых флоатов))

2 лайка

с таким же кодом получается куча разбросанных кубов

<!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="block6"></div>
            <div class="block5"></div>
            <div class="block7"></div>
            <div class="block2"></div>
        </div>
    </body>
</html>

А так можно или читерство? ))

<body>
        <div class="puzzle">
            <div class="block3" style="float:left"></div>
            <div class="block8"></div>
            <div class="block5"></div>
            <div class="block6"></div>
            <div class="block1"></div>
            <div class="block4"></div>
            <div class="block7"></div>
            <div class="block2"></div>
        </div>
    </body>

Нельзя.

У меня не выходила первая линия, оказывается перепутал зеленый горизонтальный прямоугольник местами с нижним на своем чертеже с флоатами на право и влево.