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

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

Скажу честно - я вообще ничего не понимаю ни про это задание, ни про другие задания этого блока.

Мне кажется, что нужно сайты учить делать - как с котом, а не этим ужасом заниматься.

23 
 <div class="puzzle">
      <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="block7"></div>
      <div class="block2"></div>
      </div>

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

1 лайк
24

Мой Вариант

25

Долго не мог понять логику. Ставил block3 первым, и не понимал почему не выстраиваются остальные. Оказалось все просто. У них же float прописан rigth. Следовательно они все (кроме одного) прижаты в право. Значит и строить надо было начинать с права! Блин=) Просто немного внимательности и все=) Начинайте с block5 и все у вас получится. И не забудьте про подсказку=)

26

Спасибо что подсказали и не дали ответ. Всё получилось.

27

я не обратил внимание на то что float-ы настроены в разные стороны и поэтому ничего не получалось, особенно с сереневой, в конце, когда осталась только сереневая пришлось через костыль сделать, потом почитав форум понял что все намного проще
Вот мой код:

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

Решил для доп наглядности прописать тайтлы (отображаются при наведении мышкой на обьект) + прописал в комментариях логику (как сам понял, если что-то не правильно прошу исправить). Оставляю, вдруг кому-то пригодится:

   <div class="puzzle">
      <!--
      Вставляйте дивы с классами
      от block1 до block8 в определённом порядке
      <div class="block1"></div>
      -->
      <!--первая строка справа-налево-->
       <div class="block5" title="right-red"></div>
       <div class="block7" title="right-green"></div>
       <!--первый элемент не флоат, чтобы его обтекали флоаты он ниже-->
       <div class="block3" title="not-float"></div>
       <!--посередине между элементами слева и справа-->
       <div class="block6" title="right-gold"></div>
       <!--элементы которые слева-->
       <div class="block1" title="left-skyblue"></div>
       <div class="block4" title="left-red"></div>
       <div class="block8" title="left-green"></div>
       <!--блок снизу, синий-->
      <div class="block2" title="right-blue"></div>
    </div>
32

в комментариях: порядок слева-направо/сверху-вниз и цвет блока:

  <div class="block5"></div><!-- 3 tomato     -->
  <div class="block7"></div><!-- 2 lightgreen -->
  <div class="block3"></div><!-- 1 purple     -->
  <div class="block1"></div><!-- 4 skyblue    -->
  <div class="block4"></div><!-- 5 tomato     -->
  <div class="block6"></div><!-- 6 gold       -->
  <div class="block8"></div><!-- 7 lightgreen -->
  <div class="block2"></div><!-- 8 skyblue    -->
33 
<!DOCTYPE html>
<html>
  <head>
    <title>Испытание: пазл на флоатах</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="puzzle">
      <!--
      Вставляйте дивы с классами
      от block1 до block8 в определённом порядке
      <div class="block1"></div>
      -->
      
      <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>
      
    </div>
  </body>
</html>