3

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

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

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

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

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

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

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

3 ответа 3

2

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

2
  • Я уже думал. И про три дива думал. Но проблема в том, что количество столбцов должно быть динамическим... на самом деле это, как я понял, единственное правитьное решение, но оно мне не подходит. В общем я сделал их более-менее квадратными и поставил floaf: left; Но все равно спасибо =)
    – Zelta
    6 июн 2013 в 8:21
  • Насчет динамического: при использование любых шаблонов (хоть jQuery template), можно сделать пару шаблонов (3 или 2 столбца), и выбирать нужный в зависимости от ширины экрана 6 июн 2013 в 8:23
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;
}
<div class="wrapper">
  <div class="small"></div>
  <div class="medium"></div>
  <div class="big"></div>
  <div class="small"></div>
  <div class="big"></div>
  <div class="medium"></div>
  <div class="small"></div>
  <div class="big"></div>
  <div class="medium"></div>
</div>

Пример на jsfiddle

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

0

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

<div class="row">
  <div class="colunm large-4">
    <div>Блок 1</div>
    <div>Блок 4</div>
    <div>Блок 7</div>
  </div>
  <div class="colunm large-4">
    <div>Блок 2</div>
    <div>Блок 5</div>
    <div>Блок 8</div>
  </div>
  <div class="colunm large-4">
    <div>Блок 3</div>
    <div>Блок 6</div>
  </div>
</div>
2
  • Это не решит проблему. Во-первых, нужно было не переключение «три колонки-одна колонка», а динамическое число колонок. Во-вторых, посмотрите еще раз внимательно на ваш код. Это же ужасно — Блок 1, Блок 4, Блок 7... В третьих, когда это станет одной колонкой, порядок будет нарушен: Блок 1 -> 4 -> 7 -> 2 -> 5 -> .... Это плохо.
    – Zelta
    15 фев 2016 в 0:51
  • Сейчас бы я конечно использовал flexbox. Но в 13 году эта штука еще не было распространена.
    – Zelta
    15 фев 2016 в 0:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.