0

如果太复杂或太费力，我可以使用 CSS3 中刚刚引入的多列布局。你有什么建议吗？

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

Elemento1     Elemento5
Elemento2     Elemento6
Elemento3     Elemento7
Elemento4

代替：

Elemento1
Elemento2
Elemento3
Elemento4
Elemento5
Elemento6
Elemento7

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

我想知道是否有办法打破循环并从同一模板的另一部分恢复并继续从中断的地方对元素进行充电。

4

2 回答 2

1

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

演示

<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属性尚未得到广泛支持。我建议您以编程方式破坏布局。有关支持的更多信息，请参阅此 链接

于 2013-06-29T08:53:42.953 回答
0

如果您不能使用 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 %}来获得中点（四舍五入）？

于 2013-06-29T12:15:19.547 回答