Устройте отделения действующего блока приятно

У меня есть ряд отделений с этим расположением:

div.post_summary {
    clear: none;
    width: 170px;
    display: inline-block;
    float: left;
    margin: 5px;
    background-color: #FF5900;
}

Это теперь похоже:

enter image description here

Но я хочу, чтобы он был похож:

enter image description here

Заказ отделений никоим образом не имеет значения. Как я могу сделать это?

1
nl ja de
@TImCooper - там решение без JavaScript также?
добавлено автор Keelan, источник

1 ответы

Так как заказ не имеет значения, можно сделать это с колонками CSS:

http://codepen.io/cimmanon/pen/CcGlE

div.container { /* container holding all of your `div.post_summary` elements */
  columns: 20em; /* desired width of the columns */
}

div.post_summary {
    margin: .5em;
    background-color: #CCC;
}

div.post_summary:first-child {
  margin-top: 0;
}

Удостоверьтесь, что вы проверяете http://caniuse.com/#feat=multicolumn видеть, в каких префиксах вы нуждаетесь.

1
добавлено
Спасибо, но это не совместимо с IE. Есть ли CSS-единственное решение, которое работает во всех браузерах?
добавлено автор Keelan, источник
Хорошо, спасибо за ваш ответ, который действительно отвечает на вопрос. I' m не собирающийся использовать это, хотя, но спасибо так или иначе!
добавлено автор Keelan, источник
Ваш вопрос didn' t определяют поддержку браузера. CSS Columns или Flexbox (ориентация колонок) являются вашими единственными возможностями для чистого CSS, и только доступный в IE10 +.
добавлено автор cimmanon, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)