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

Posted 2023-02-24

【中文标题】是否可以创建在多列中排序的项目列表，选择最多项目的列？

【英文标题】：Is it possible create a list of items ordered in multiple columns, select a column for a maximum of items?

【发布时间】：2013-06-27 00:51:39

【问题描述】：

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

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

Elemento1     Elemento5
Elemento2     Elemento6
Elemento3     Elemento7
Elemento4

代替：

Elemento1
Elemento2
Elemento3
Elemento4
Elemento5
Elemento6
Elemento7

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

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

【参考方案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 链接

【讨论】：

事实上，这就是为什么我问是否有办法打破循环并恢复。你知道我该怎么做吗？

无前缀属性应该always在前缀版本之后。

【参考方案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 % 来获得中点（四舍五入）？