将ul分成多列

在这个论坛中，我发现了一个jQuery解决方案，将一个长ul分成多个列。这篇文章有点旧了，几天后仍然没有答案，所以我开始了一个新的话题。将ul分成多列

问题是，当最后一列有几个li项目时，li被放置在底部而不是顶部。事情是这样的：

columnA  columnB 
<li></li> 
<li></li> 
<li></li>  <li></li> 
<li></li>  <li></li>

我使用的代码是这样的：

var col_max_height = 15; //Max Items per column 
    var col_width = 175; //Pixels 
    var col_height = 18; //Pixels 
    $('.categories ul li ul').each(function() { 
    $(this).find('li').each(function(index){ 
     column = parseInt(index/col_max_height); 
     $(this).css('margin-left', column * col_width + 'px') 
     if(column > 0) { 
     $(this).css('margin-top', (index - (col_max_height * column) + 1) * -col_height + 'px').addClass('col_'+column); 
    } 
    }); 
    });

正如你可以看到代码放置物品李开始margin-top:-270px。我想从margin-top:0开始，然后再往下。

我看不到什么该做...

来源

2013-08-20 Meules

您可以添加关联的HTML或链接到草图/小提琴吗？ – kunalbhat

这似乎是一个不好的方法来做到这一点。您可以使用“float：left”，而只是让每个新项目流向下一行。这样你就不需要使用margin-top。 – Ringo

您无法使用HTML5列数？ – daniel0mullins

只需使用CSS columns和螺旋老的浏览器（它们可以与单个列活）：

FIDDLE

ul { 
    -webkit-columns: 2; 
    -moz-columns: 2; 
    columns: 2; 
}

来源

2013-08-20 20:06:23 Evgeny

尝试删除：

if(column > 0)

或将其更改为：

if(column >= 0)

这应该做的伎俩......如果不是这样，问题似乎发生在列为零和一些边际计算误导了这种情况。

来源

2013-08-20 20:17:53

回答

相关问题