Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.09.2016, 23:25
Аспирант
Отправить личное сообщение для alexandr2006 Посмотреть профиль Найти все сообщения от alexandr2006
 
Регистрация: 30.01.2013
Сообщений: 54

Плавающие блоки
Есть код типа

Код:
<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

Была определенная надежда на флекс-бокс, но чет примеров не нашел. Скриптом не предлагать
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2016, 02:52
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

alexandr2006, float
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2016, 08:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от alexandr2006
Была определенная надежда на флекс-бокс, но чет примеров не нашел.
В влексбоксе блоки идут рядами. Перехлестов не делают.
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2016, 13:26
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

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

<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слайдер БЛОКИ на одной странице. roswebsoft Events/DOM/Window 3 12.10.2015 16:05
Плавающие блоки Alexd Работа 5 14.05.2015 20:07
Плавающие блоки Sanu0074 jQuery 3 03.04.2015 00:57
Показать скрыть блоки nurik2120 Элементы интерфейса 4 18.06.2013 10:59
Вопрос про появляющиеся блоки. Vladislav Библиотеки/Тулкиты/Фреймворки 3 15.06.2013 02:16