Форум

alexandr2006 · #1 (**permalink**) 28.09.2016, 23:25

Есть код типа

Код:

<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

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

ksa · #2 (**permalink**) 29.09.2016, 08:11

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

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

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

Pavel M. · #3 (**permalink**) 29.09.2016, 13:26

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

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

Форум

Справочник

Discord чат

Курсы javascript