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

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


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

Испытание: пазл на флоатах
        <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 Симпатий

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

1 Симпатия

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

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

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

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

2 Симпатий

Можно просто прописать стили в 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 Симпатий

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

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

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

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

3 Симпатий

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

1 Симпатия

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

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

1 Симпатия

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

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

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

1 Симпатия

Для удобства использовал цифры 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>

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

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