Испытание: пазл на флоатах [13/32]. Мое решение на 100% и подробная инструкция.


#1

Еще один мини-гайд, который поможет разобраться с поведением флоатов и закрепить изученный материал. Задание понятно - собрать пазл путем правильного порядка расположения контейнеров :package: в html-коде.
В данной инструкции я опишу подробно более понятный метод решения, нежели тот, который использовал я.
Итак приступим.

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

Первым делом найдем наш “незафлоаченый” квадрат (фиолетовый).

Мой вариант решения предполагает сбор пазла справа налево. Первый справа у нас идет красный прямоугольник прилипающий к правому краю (имеющий float: right) - это наш block5 :five: , располагаем его в HTML-коде выше всех остальных контейнеров, сразу после него справа налево идет зеленый прямоугольник (тоже нужен с float: right) - таким параметрам отвечает block7 :seven:, размещаем следующим после 5-го блока в HTML-коде.

Теперь нам нужно разобраться с нашим незафлоченным блоком. В задании сказано: для того, чтобы флоатный блок мог обтекаться обычным, он должен в коде располагаться выше обычного. Получается, для того чтобы наш фиолетовый block3 :three: смог обтекать предыдущий блок (ведь мы решаем задачу справа налево), то в HTML- коде он должен идти после того блока, которого хочет обтекать :grinning:

Следующим у нас идет оранжевый block6 :six: с правым флоатом, значит он располагается ниже по списке.

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

Первым идет синий прямоугольник block1 :one:, а следом за ним красный block4 :four:. В таком порядке (сначала 1, за ним 4) располагаем их в нашем HTML-коде. Дальше у нас идет зеленый прямоугольник с левым флоатом block8 :eight:, а сразу за ним наш горизонтальный синий прямоугольник с правым флоатом block2 :two:.

Вот мой вариант решения:

    <div class="puzzle">
        <div class="block5"></div>
        <div class="block7"></div>
        <div class="block3"></div>
        <div class="block6"></div>
        <div class="block1"></div>
        <div class="block4"></div>
        <div class="block8"></div>
        <div class="block2"></div>
    </div>

:checkered_flag: Задание выполнено на 100%.
На самом деле вариантов решения есть несколько (например, если поменять местами block8 и block2 пазл тоже соберется). Есть так же несколько вариантов решения. Например я, сначала задал незафлоаченный фиолетовый блок, а потом перед ним дописывал 5 и 7 блоки, но не стал описывать такой метод, он может показаться не слишком понятным, по-этому я пошел логичным путем, представил, что если бы это был не пазл, а сайт, то там было бы легче идти по порядку, нежели дописывать потом дополнительные div поверх остальных, а лучше сразу все размещать в правильном порядке.
Спасибо за внимание, я старался :slight_smile:


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

Видимо, я применил хак, промучился с block3 и применил перегрузку, и получил 100%

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

#3

Я сама сделала минут за 15. Я не методом подбора делала, а пыталась по логике подобрать последовательность, но в итоге все-равно едва понимаю, как это работает и ваше обьяснение тоже не поняла.
Мое решение:

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

Может кто нибудь по другому обьяснить эту тему?
Зафлоаченные блоки видят 3 блок?
Получается что только 3 блок не видит все остальные?
Из этого я и исходила.
Но если пробовала поставить 8 блок зафлоаченный слева вместо седьмого, то он наезжал на 3.
Выходит его свойство float: left более специфичное чем то, что там вообще то уже есть 3 блок и он на него все равно будет наезжать?

Если зафлоаченные блоки видят незафлоаченный, то понятно, что 1 должен быть после 3-го, чтобы не сьезжать вверх. И если поставить верхний зеленый и красный и если все работает так как я предположила, то дальше уже проще.


#5

путаница с 7 и 8 блоком замучала
все пытался 8 присобачить между 3 и 5. конечно безрезультатно (если не учитывать что применил style)


#6

Спасибо огромное, справилась))) но порядок у меня в конце немного другой 7,5,3,1,6,4,8,2. Ваши старания я ОЦЕНИЛА:)))


#7

Это какая -то издевка? Вожу у себя ВСЕ варианты предложенные в этой теме. НИ разу не собрался пазл, все налеплено друг на друга


#8

Проверил ВСЕ варианты кода этой ветки.
ВСЕ работают правильно.
Win XP, Chrome v.49., Firefox v.52.

Вы вводили вручную код или копировали-вставляли CTRL+C, CTRL+V?

(налеплено бывает при незакрытых div)


#9

На домашнем пк фигуры не накладываются друг на друга, решить представляется реальным.


#10

Специально зарегистрировался что бы оставить хак. Для того что бы легче пройти задание и лучше разобраться в коде - каждому блоку присвойте имя -
<div class="block7">7 left </div> например.
То есть номер блока и выравнивание. Мне очень помогло разобраться с логикой и понять что куда наслаиваеться. НО! не забудьте стереть перед проверкой. Я забыл )))