CSS поле "поток" / укладка (см. Скриншот)

Question

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

Боксы, которые будут сгенерированы с использованием реализации JJuery AJAX, если это имеет значение.

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

Допустим, у меня есть шесть категорий закладок (ящиков). Поскольку пользователи могут вводить столько или несколько закладок, сколько пожелают, в каждую категорию (которая также не ограничена), я действительно не знаю, насколько большой будет любая из коробок.

На новой прилагаемой иллюстрации, я надеюсь, это лучше видно.

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

Я могу каким-то образом подражать этому, используя http://welcome.totheinter.net/columnizer-jquery-plugin/,, но он не идеален, и ЕСЛИ есть странный CSS-способ сделать это, было бы намного предпочтительнее.

Используя код, предложенный Джонатаном, было бы хорошо, если бы каждая категория содержала примерно одинаковое количество закладок, и я был в порядке, используя фиксированный макет столбца, но когда одна категория содержит 50 закладок, а другая - только три, много места тратится впустую.

См .: скриншот / иллюстрация Ole
См .: Новая иллюстрация

Answer 1

Неа. Если вы не можете рассчитывать на количество столбцов, то не существует единственного решения для CSS (хотя, похоже, в CSS3 это будет, забавная мысль). Вам понадобится JS.

Answer 2

Это не более чем три основных столбца с полями внутри:

<div class="col1">
  <div class="box1">Top Left Box</div>
  <div class="box2">Middle Left Box</div>
  <div class="box3">Bottom Left Box</div>
</div>
<div class="col2">
  <div class="box1">Top Center Box</div>
  <div class="box2">Middle Center Box</div>
  <div class="box3">Bottom Center Box</div>
</div>
<div class="col3">
  <div class="box1">Top Right Box</div>
  <div class="box2">Middle Right Box</div>
  <div class="box3">Bottom Right Box</div>
</div>

Тогда нужно задать каждой клетке определенную высоту и минимальное поле для всех.

.col1, .col2, .col3 {
  margin:10px 5px;
  float:left;
  width:100px;
}
.col1 div, .col2 div, .col3 div {
  margin-bottom:10px;
}
.col1 .box1 {
  height:100px;
}