Автоматически упорядочить <li>элементов в одинаковые столбцы

Question

У меня есть несколько значений, которые я визуализирую как элементы <li> в моем шаблоне, и я хочу продвинуть это, поместив их в одинаковые (или почти равные столбцы) автоматически в шаблоне. Как мне этого добиться?

Пока я отображаю все значения как

<ul>
   {% for feature in features %}
      <li>{{ feature }}</li>
   {% endfor %}
</ul>

Answer 1

В новых браузерах вы можете добиться такого поведения, используя CSS:

ul {
    -moz-column-count: 2; -moz-column-gap: 12px;
    -webkit-column-count: 2; -webkit-column-gap: 12px;
    column-count: 2; column-gap: 12px;
}

К сожалению, IE не подыгрывает (на сегодняшний день). Чтобы обойти это, я хотел добиться того же эффекта, используя JavaScript. Сначала я попробовал Columnizer , но он вставляет div s в те невинные ul элементы, которые мне не нравились.

Итак, я решил создать наш собственный маленький плагин, чтобы делать именно то, что нам нужно: ColumnizeLists , часть нашей библиотеки расширений jQuery .

Включите следующий тег сценария на свою страницу:

<script src="https://github.com/teamaton/jquery-xt/blob/master/columnize-lists/tn.columnizelists.jquery.js"></script>

(или локальная копия) и просто позвоните

$('ul').columnizeLists({ useHeights: true })

и все готово: -)

Надеюсь, это поможет.

Answer 2

Как насчет стиля каждого li с style="float:left; width: {% width %}px;"

Все, что вам нужно сделать, это вычислить параметр ширины ... например, width = 1000/features.length;