Question

如果它过于复杂或费力，我可以使用CSS3中引入的多列布局。你推荐什么？

基本上我想在模板中实现的是：

Elemento1     Elemento5
Elemento2     Elemento6
Elemento3     Elemento7
Elemento4

而不是：

Elemento1
Elemento2
Elemento3
Elemento4
Elemento5
Elemento6
Elemento7

通常我使用{% for a in b %}{{ a }}{% endfor %}。

我想知道是否有办法打破周期并从同一模板的另一部分恢复并继续从中断的位置收取元素。

Answer 1

如果您询问CSS3解决方案，唯一可行的方法是使用column-count属性..

Demo

<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

CSS

div.wrap {
    border: 1px solid #f00;
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
}

注意：column-count属性尚未广泛支持..我愿意建议你以编程方式打破布局。有关支持的更多信息，请参阅this 链路

Answer 2

如果你不能使用CSS3列数，那么可能是这样的：（从未真正使用过Django）

<ul><div class="col">    
{% for a in b %}{{
  {% if forloop.counter == 4 %}
    <li>a</li>
    </div><div class="col">
  {% else %}
    <li>a</li>
  {% end if %}
{% endfor %}
</div></ul>

CSS：（http://jsfiddle.net/Mp5Rf/）

.col {
  display: inline-block;
  float: left;
  padding-left: 25px;
}

而不是硬编码4，你可以使用{% widthratio b|length 2 1 %}来获得中间点（向上舍入）吗？

是否可以创建在多列中排序的项目列表，为最多项目选择一列？

2 个答案: