13/32

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

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

Безымянный.jpg1120×326 56.9 KB

2

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

3

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

4

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

5 лайков
6

получилось)

паззл.jpg1118×322 54.4 KB

3 лайка
7

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

пазл.jpg1077×399 69.7 KB

4 лайка
8

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

9

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

3 лайка
10

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

1 лайк
11

Хоть убей-не понимаю,почему зеленый блок не встает в паз,ему же достаточно места, и в ряд их можно выстраивать,на примере верхних 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>
12

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

13

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

14

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

15

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

Имя файла изображения862×320 31.3 KB

16

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

2 лайка
17

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

19 
<!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>
20

image.png1680×1026 72.2 KB

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

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

Нельзя.

22

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