Испытание: пазл на флоатах[13/23]

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

Доброго времени суток, возникла проблема с решением пазла.

Имя файла изображения1366×768 111 KB

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

Испытание: пазл на флоатах 
        <div class="block3"></div> <!--сиреневый не флоат-->
        <div class="block5"></div>  <!--красный вертикальный-->
        <div class="block1"></div>  <!--синий вертикальный-->
        <div class="block8"></div>  <!--зеленый горизонтальный-->
        <div class="block6"></div>  <!--желтый-->
        <div class="block4"></div>  <!--красный вертикальный-->
        <div class="block7"></div>  <!--зеленый горизонтальный-->
        <div class="block2"></div>  <!--синий горизонтальный-->
    
    </div>
</body>

Подскажите, где набедокурил. Заранее спасибо за ответ.

2

Внимательно читайте теорию к заданию.

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

2 лайка
3

Опять те же костыли. Спасибо. Я подумал что нефлоатный должен быть вверху, как всегда ньюансы подводят )). Еще раз спасибо.

1 лайк
4

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

5

Методом тыка не надо. Ссылкой на задание поделитесь, чтоб долго не искала.

6
7

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

8

попробуй внимательно собрать первую строку(3 блока), а там все получится само собой!!!зеленый и красный флоат справа,а не зафлоаченный сам понимаешь где будет.P.S слева(по умолчанию).

2 лайка
9

Можно просто прописать стили в div)) тоже получится 100%) хоть это немного и не по заданию) примерно вот так :

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

3 лайка
10

Всем отписавшимся, огромное спасибо, задание давно выпонил :slight_smile:

12

Помогите найти ошибку в коде:

  <div class="puzzle">
         <div class="block8"></div>
         <div class="block5"></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>

Блок 3 уезжает на блок 1, и блок 8 съезжает на место блока 3.

13

Безымянный.png1280×1024 88.6 KB

14

Расположение блоков на 100%. И не нужно стили дописывать в html
block5
block7
block3
block1
block4
block6
block8
block2

4 лайка
15

Спасибо, разобралась

1 лайк
16

закрывайте тэги в дивах!!! из-за того что в предыдущих заданиях этого делать не требовалось а в испытаниях надо- я их, естественно, не закрыл, и в связи с этим испытывал сильнейшую фрустрацию и разочарование до тех пор, пока не закрыл тэги.Почему, кстати, в промежуточных заданиях тэги закрывать не обязательно для наглядного результата?! учить так учить!!! (задание на две минуты)

17

Все стараются начинать расставлять слева направо… Попробуйте Наоборот - Справа налево ))) С пятого красного блока ))

1 лайк
18

у меня вот так получилось

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

Ничего не видно.

1 лайк
20

Для удобства использовал цифры 1-8, удали цифры будет 100% :slight_smile:

    <div class="puzzle">
        <div class="block5">5</div>
        <div class="block7">7</div>
        <div class="block3">3</div>
        <div class="block1">1</div>
        <div class="block4">4</div>
        <div class="block6">6</div>
        <div class="block8">8</div>
        <div class="block2">2</div>
    </div>
21

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

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