自动将<li>元素排列成相等的列</li>

Question

我有几个值，我在我的模板上呈现为<li>个元素，我希望通过在模板中自动将它们排列成相等（或接近相等的列）来进一步实现这一点。我怎样才能做到这一点？

到目前为止，我将所有值都渲染为

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

Answer 1

如何使用li

为每个style="float:left; width: {% width %}px;"设置样式

您所要做的就是计算宽度参数......例如width = 1000/features.length;

Answer 2

在较新的浏览器中，您可以使用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插入到那些我不喜欢的无辜ul元素中。

所以我开始构建我们自己的小插件，以完全满足我们的需求：ColumnizeLists，我们jQuery extensions library的一部分。

在页面中包含以下脚本标记：

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

（或本地副本），只需致电

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

你已经完成了： - ）

希望这有帮助。