Макет в несколько столбцов с содержимым разной высоты

#html #css #django

Здравствуйте!

Такая проблема:

Из базы данных приходит список новостей. Каждая новость — это картинка, заголовок
и поясняющий текст. Все новости помещаются в несколько колонок (от 1 до 3 в зависимости
от ширины окна). Все новости одинаковой ширины но разной длинны.

Нужно сверстать примерно такой макет:


При этом нужно сохранить порядок новостей.

И вот не могу придумать, как такое сделать... Очень хочется без js. Используется
django, шаблонизатор родной.

UPD: Если все-таки JS — к сайту прикручен JQuery.
    

Ответы

Ответ 1

А как насчет варианта с таблицами? Внешняя таблица имеет 3 столбца, а в эти столбцы
добавляйте содержимое как хочется?


Ответ 2

На форуме htmlbook нашелся еще один вариант:



.wrapper {
  line-height: 1em;
  columns: 200px auto;
  -moz-columns: 200px auto;
  -webkit-columns: 200px auto;
  break-after: column;
}
.wrapper div {
  width: 250px;
  display: inline-block;
  background: #303;
  margin: 10px 20px;
  vertical-align: top;
}
.small {
  height: 200px;
}
.medium {
  height: 300px;
}
.big {
  height: 350px;
}

  

  

  

  

  

  

  

  

  






Пример на jsfiddle

Прядок новостей, правда, не сохраняется, но использовать можно. Спасибо zlodeev.


Ответ 3

Почему бы не воспользоваться каким-нибудь css фреймворком? Например, foundation.
Вот как это сделать при помощи этого фреймворка:


  

    
Блок 1
    
Блок 4
    
Блок 7
  
  

    
Блок 2
    
Блок 5
    
Блок 8
  
  

    
Блок 3
    
Блок 6