Javascript-форум - Плавающие блоки

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Плавающие блоки (https://javascript.ru/forum/xhtml-html-css/65132-plavayushhie-bloki.html)

Плавающие блоки

Есть код типа

Код:

<section>

<aside style="height:370px; width:60%"></aside>

<aside style="height:200px; width:20%"></aside>

<aside style="height:200px; width:20%"></aside>

<aside style="height:200px; width:20%"></aside>

...

<aside style="height:200px; width:20%"></aside>

<aside style="height:200px; width:20%"></aside>

</section>

Как бы его свкрстать в таком виде https://gyazo.com/80f0fd9c4fd2c9daa042650103a6eea6

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

alexandr2006, float

Цитата:

Сообщение от alexandr2006

Была определенная надежда на флекс-бокс, но чет примеров не нашел.

В влексбоксе блоки идут рядами. Перехлестов не делают.

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

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
  <style>
    aside {
      box-sizing: border-box;
      background: red;
      border: 1px solid white;
      float:left
    }
    aside:nth-child(2),
    aside:nth-child(3),
    aside:nth-child(4),
    aside:nth-child(5),
    aside:nth-child(9),
    aside:nth-child(10)
    {
      float:right;
    }
  </style>
</head>
<body>
<section>
  <aside style="height:370px; width:60%;"></aside>
  <aside style="height:200px; width:20%"></aside>
  <aside style="height:200px; width:20%"></aside>
  <aside style="height:200px; width:20%"></aside>
  <aside style="height:200px; width:20%;"></aside>
  <aside style="height:200px; width:20%;"></aside>
  <aside style="height:200px; width:20%;"></aside>
  <aside style="height:200px; width:20%;"></aside>
  <aside style="height:200px; width:20%"></aside>
  <aside style="height:200px; width:20%"></aside>
  <aside style="height:200px; width:20%"></aside>
  <aside style="height:200px; width:20%"></aside>
  <aside style="height:200px; width:20%"></aside>
</section>
</body>
</html>