Ответ 1

Благодаря J.Albert Bowden для fiddle

HTML

<div id="box">
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
</div>

CSS

#box{
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.module{
    margin-bottom: 20px;
}

Ответ 2

В первую очередь: вы не сможете получить столбец-оболочку с плавающей точкой: как отмечают другие комментаторы, это просто не то, как работают поплавки. Также нет модуля автоматической компоновки макета в CSS, который, как я подозреваю, является тем, что вы действительно заслуживаете. Я также предполагаю, что размещение каждого элемента индивидуально не может быть и речи.

Самое близкое, что вы получите, это Grid Layout - хорошо добирайтесь до конца. Спойлер:, это действительно здорово, но будет немного, пока браузер не будет действительно хорош.

Итак, TL; DR: нет метода перекрестного браузера для создания умного, по строкам, кластерного макета в CSS. Но макет сетки приближается. Если вы не можете ждать, используйте JS или переключите дизайн на то, что работает с оберточными столбцами, например.

Если вы выбираете маршрут JS, вы можете использовать Grid Layout JS polyfill! Таким образом, вы можете написать синтаксис макета сетки сегодня и удалить polyfill, когда он больше не понадобится, в какой-то момент в будущем.

Расположение столбцов с несколькими столбцами

Судя по другим ответам и комментариям, макет столбчатой ​​упаковки не то, что вы хотите. На всякий случай, если вы все-таки решите пойти по этому маршруту, вы можете сделать это с помощью Макет нескольких столбцов. Поддержка очень хорошая: все, кроме IE < 10, в значительной степени.

Быстрый пример, на всякий случай, если вы хотите изменить свой макет, чтобы перейти в многоточечном направлении: heres a JSBin с двухколоночным многострочным макет. Обратите внимание, что вам не нужно устанавливать как column-count, так и column-width: установите a column-count (и column-gap), а остальные будут сортироваться вне.

О, и если вы получите багги рендеринга с полями (например, наложение полей на новые столбцы, создание неравномерных макетов), обычное исправление заключается в установке display: inline-block; width: 100%; на .module. Ваше возражение может отличаться: для чего-то, что было вокруг долгое время, многократная уверенность в ошибках.

Обозначение столбца с flexbox

С помощью столбчатой ​​компоновки еще немного дольше, вы также можете использовать flexbox. (Я вижу еще один ответ, воспитывающий Flexbox, но, к сожалению, полностью устаревший синтаксис, который не будет работать в современных браузерах).

Разница между обертыванием в столбцы в multi-col vs flexbox заключается в том, что flexbox не балансирует элементы в столбцах для вас (это не сделано для этого типа макета), поэтому вам нужно установить конкретную высоту, чтобы заставить столбцы обернуть. Если у вас есть элемент контейнера (.container) и .module внутри него, следующим является базовый подход:

.container {
  display: flex;
  flex-flow: column wrap;
  height: 1000px; /* or whatever works for you */
}
.module {
  /* whatever props you want for modules */
}

... не считая префиксов и синтаксических вариаций для IE10, который использует несколько более старый вариант спецификации. (Theres также старомодный Flexbox, который не поддерживает гибкую упаковку, поэтому хорошо забудьте об этом). Простой JSBin wrapping flexbox пример здесь.

Плотная упаковка с автоматическим размещением макета сетки

Наконец, мы переходим к Grid Layout. Эта новая спецификация имеет некоторые действительно интересные функции, которые позволяют нам сделать что-то близкое к макету "Масонство".

Heads up: вам нужно проверить эти примеры в Chrome Canary, выпуске WebKit Nightly или Firefox Developer. Существует старая реализация Grid Layout в IE10 + (и Edge), но она не содержит всех новых свойств горячего режима, которые нам нужны.

Сначала разметка: используйте элемент оболочки + элементы .module внутри (оболочка не является строго необходимой - мы могли бы поместить модули непосредственно в body, но я просто нахожу ее более ясными):

<div class="container">
  <div class="module"></div>
  <div class="module"></div>
  <!-- and so on -->
</div>

Затем мы указываем контейнеру контейнер сетки:

.container {
  display: grid;
}

Затем мы устанавливаем его для "шаблона" для столбцов из 2 столбцов равной ширины (1 "дробная единица" ) и пробелов между столбцами, а также строк 20px:

.container {
  display: grid;

  /* 2 columns, equally wide: */
  grid-template-columns: 1fr 1fr;

  /* gaps between each column and row. */
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  /* ...can also be shortened to grid-gap: 20px; */
}

Мы еще не дали шаблон для строк, но нам нужно только разрешить ему автоматически создавать их по мере необходимости. Для этого мы устанавливаем свойство grid-auto-rows, чтобы добавить как можно больше 50px высоких строк:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;

  /* automatically create rows, 50px tall each: */
  grid-auto-rows: 50px;
}

В этот момент мы еще не помещаем какие-либо элементы внутри контейнера, по крайней мере, явно. С сеткой вы можете точно указать, в какой области сетки находится элемент shoud. Дело в том, что вам не нужно! Сетка поместит их автоматически в первый доступный слот, начиная с левого верхнего угла и переходя по строкам по умолчанию, если вы не сообщите об этом иначе.

Вместо этого нам нужно сказать, что некоторые предметы больше других. Мы не используем размеры для этого, но вместо этого указываем нечетные элементы на 2 строки, а каждый третий элемент - на 4 строки.

.module {
  background: yellow;
}

.module:nth-child(odd) {
  grid-row: span 2;
  background: green;
}
.module:nth-child(3n) {
  grid-row: span 4;
  background: orange;
}

Наконец, нам нужно сказать сетке использовать "плотный" алгоритм, то есть он сделает один проход места на один элемент, пытаясь избежать "дыр" в автоматическом размещении.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-auto-rows: 50px;

  /* use the "dense" algorithm: */
  grid-auto-flow: row dense;
}

Это дает нам что-то очень близкое к макету "кирпичной кладки", как видно из этого Пример JSBin плотной схемы сетки - Еще раз обратите внимание, что вам понадобятся ночные /dev версии Chrome/WebKit или Firefox, чтобы узнать, как это работает.

Получает изображение результата, если смотреть в Chrome Canary:

Некоторые примечания:

• Алгоритм упаковки row dense действительно не имеет никакого значения здесь, так как элементы располагаются в шаблоне, который не содержит отверстий, но я поставил его там для полноты.
• Как вы можете видеть, theres одиночный элемент в последней строке-сетке не может изменять магический размер (например, плагин jQuery Masonry), он может иметь размер только в соответствии с позициями или интервалами сетки. Это не серебряная пуля для алгоритмического макета упаковки. Тем не менее, это невероятно мощно и весело, когда вы овладеете им. В течение года или около того (по максимуму, моя догадка), он будет во всех крупных (вечнозеленых) браузерах.

Ответ 3

Попробуйте это. http://jsfiddle.net/rymfev8c/1/

HTML

<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>

CSS

body {
  padding: 40px;
}

.module {
  height: 50px;
  width: 45%;
  margin-right: 3%;
 margin-bottom: 60px;
  background: yellow;
  float: left;
}

.module:nth-child(odd) {
  height: 100px;
  background: green;
 margin-bottom: 5px;
}
.module:nth-child(3n) {
  height: 200px;
  background: orange;
  margin-bottom: 5px;
}

omg его 3 лет..

Ответ 4

Вы можете использовать тег table. Попробуйте что-то вроде этого

HTML

<table cellpadding="0" cellspacing="0" width="100%" height="100%">  
  <tr>     
    <td>      
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
    </td>
    <td>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>
      <div class="module"></div>           
    </td>    
  </tr>  
</table>

CSS

body {
  padding: 40px;
}

.module {
  height: 50px;
  width: 45%;
  margin-right: 3%;
  margin-bottom: 20px;
  background: yellow;
}

DEMO: http://jsfiddle.net/89mW6/5/

Ответ 5

HTML

<div id = "box">
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
</div>

CSS

#box{
display:box;
box-orient: vertical;
-webkit-display:box; 
-webkit-box-orient: vertical;
}

.module{
box-flex: 1;
-webkit-box-flex: 1;
}

Это box-flex, введенный в css3. вам, возможно, придется использовать также -webkit-/-moz- свойство, прежде чем "display", "box orient" и т.д., это зависит от браузера

Ответ 6

Я не думаю, что это хорошая практика, но то, что я обычно делаю в таких случаях, это построить 2 div, установить их бок о бок и просто заполнить их любым контентом, который вы хотите, но опять же, это как я это делаю, он может или не может работать для вас:)