0

在这个论坛中,我找到了一个 jquery 解决方案,可以将长 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);
    }
   });
  });

如您所见,代码将 li 项目从margin-top:-270px. 我想从那里开始,margin-top:0然后再往下走。

我看不出该怎么做...

4

2 回答 2

0

只需使用CSS 列并拧旧浏览器(它们可以使用单个列):

小提琴

ul {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}
于 2013-08-20T20:06:23.400 回答
0

尝试删除:

 if(column > 0)

或将其更改为:

 if(column >= 0)

这应该可以解决问题......如果不是,问题似乎发生在列为零并且一些边距顶部计算误导这种情况时。

于 2013-08-20T20:17:53.437 回答