将列表包装成列

I'm using ColdFusion to populate a template that includes HTML lists (

    's).

    其中大部分时间不长,但少数人的长度非常长,可以保持2-3列。

    有没有一个 HTMLColdFusion 或者 JavaScript (我有jQuery)这不值得一些过分复杂的重量级解决方案来保存一些滚动。

0
这是对你有用的jquery插件吗? givainc.com/labs/mcdropdown_jquery_plugin.htm
额外 作者 Quog,
查看 Columnizer jQuery插件。
额外 作者 phatmann,

10 答案

There is no pure CSS/HTML way to achieve this, as far as I know. Your best bet would be to do it in pre-processing (if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

另一种选择是,使用JavaScript(我不熟悉 jQuery 库)将遍历列表,可能基于它们是某个班级,计算子女数量,如果数量足够多,则在第一个之后动态创建一个新列表,将一些列表项目转移到新列表中。就实现这些列而言,您可能会将它们左移,然后是一个具有 clear:leftclear 风格的元素:。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}

  • Item 1
  • Item 2
  • <!-- ... -->
  • Item 49
  • Item 50

  • Item 51
  • Item 52
  • <!-- ... -->
  • Item 99
  • Item 100
<div class="clear">
</div> </div>

0
额外

所以我从A List Apart CSS Swag:多栏目列表中挖掘了这篇文章。我最终使用了第一种解决方案,它不是最好的,但其他人需要使用无法动态生成的复杂HTML,或者创建大量的自定义类,这可以完成,但需要大量的内联样式和可能是一个巨大的页面

其他解决方案仍然受欢迎。

0
额外
很遗憾,两年后还没有干净的方式来做到这一点。感谢IE。
额外 作者 Keyo,
+1我发现方法6是最干净的方法 - 它可以调整为不使用标记和非常少的CSS。
额外 作者 entonio,
很有帮助。谢谢
额外 作者 mr.soroush,

如果Safari和Firefox支持对你来说足够好,那么就有一个CSS解决方案:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

我不确定歌剧。

0
额外
我也在这个解决方案,但我失去了列表项目符号...甚至重置它们或尝试一个图像不起作用。任何人?
额外 作者 Stefano,
现在 97.8%的浏览器支持。在CSS 此处查看更多关于列选项的信息。
额外 作者 Nesha Zoric,

Flexbox可用于在行和列方向上包装物品。

主要思想是将容器上的 flex-direction 设置为 rowcolumn

NB:现在浏览器支持非常好。

FIDDLE

(样本标记取自这份旧的“分类列表”文章

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

ol {
  display: flex;
  flex-flow: column wrap; /* flex-direction: column */
  height: 100px; /* need to specify height :-( */
}
ol ~ ol {
  flex-flow: row wrap; /* flex-direction: row */
  max-height: auto; /* override max-height of the column direction */
}
li {
  width: 150px;
}
a {
  display: inline-block;
  padding-right: 35px;
}

items in column direction

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal



items in row direction
  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal
</div> </div>

0
额外

由于我有同样的问题,找不到任何“干净”的东西,我以为我发布了我的解决方案。在这个例子中,我使用了反向的 while 循环,所以我可以使用 splice 而不是 slice 。现在的优势是splice()只需要一个索引和一个范围,其中slice()需要索引和总数。后者在循环时往往变得困难。

缺点是我需要在追加时反转堆栈。

示例:</强>

cols = 4; liCount = 35

for循环与切片= [0,9]; [9,18]; [18,27]; [27,35]

当拼接= [27,8]时颠倒; [18,9]; [9,9]; [0,9]

代码:</强>

// @param (list): a jQuery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("
").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}
0
额外

要将列表输出到多个分组标签,您可以按照这种方式进行循环。






  
  • #listGetAt(list,i)#

0
额外

你可以尝试这个转换成cols。

CSS:

ul.col {
    width:50%;
    float:left;
}

div.clr {
    clear:both;
}

Html部分:

  • Number 1
  • Number 2
  • Number 19
  • Number 20

  • Number 21
  • Number 22
  • Number 39
  • Number 40


0
额外

我已经用jQuery完成了这个工作 - 它是跨平台的,并且是最少的代码。

选择UL,克隆它,然后在之前的UL之后插入它。就像是:

$("ul#listname").clone().attr("id","listname2").after()

这会在上一个之后插入你的清单的副本。如果原始列表的样式为float:left,则它们应该并排显示。

然后,您可以删除左侧列表中的偶数项目和右侧列表中的奇数项目。

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

现在你有一个从左到右的两列列表。

要做更多的列,您需要使用 .slice(begin,end)和/或:nth-​​child 选择器。 即对于21个LI,您可以 .slice(8,14)在您的原始UL之后创建一个新的UL,然后选择原始UL并删除使用 ul:gt 8)</代码>。

试试关于jQuery的Bibeault / Katz书籍,这是一个很好的资源。

0
额外

Using a modulo operation, you can quickly split your list into multiple lists by inserting a

    during your loop.
    
    
    
    • #i#
                    
      
      

      使用 ceiling()而不是 round()以确保在列表末尾没有额外的值,并且最后一列最短。

    0
    额外

    这是另一种解决方案,允许使用以下风格的柱状列表:

    1.      4.      7.       10.
    2.      5.      8.       11.
    3.      6.      9.       12.
    

    (但它是纯粹的JavaScript,并需要jQuery,没有后备)

    下面包含一些修改数组原型的代码,以提供一个名为'chunk'的新函数,该函数将给定数组分割为给定大小的块。接下来是一个名为'buildColumns'的函数,它接受一个UL选择器字符串和一个数字,用于指定列中可能包含的行数。 (这是一个可用的JSFiddle

    $(document).ready(function(){
        Array.prototype.chunk = function(chunk_size){
            var array = this,
                new_array = [],
                chunk_size = chunk_size,
                i,
                length;
    
            for(i = 0, length = array.length; i < length; i += chunk_size){
                new_array.push(array.slice(i, i + chunk_size));
            }
            return new_array;
        }
    
        function buildColumns(list, row_limit) {
            var list_items = $(list).find('li').map(function(){return this;}).get(),
            row_limit = row_limit,
            columnized_list_items = list_items.chunk(row_limit);
    
            $(columnized_list_items).each(function(i){
                if (i != 0){
                    var item_width = $(this).outerWidth(),
                        item_height = $(this).outerHeight(),
                        top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
                        left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));
    
                    $(this[0]).css('margin-top', top_margin);
                    $(this).css('margin-left', left_margin);
                }
            });
        }
    
        buildColumns('ul#some_list', 5);
    });
    
    0
    额外