Question

我在浏览并在此处找到了代码： http://codepen.io/jawittdesigns/pen/zhCrv 将列表分成三列。

我将重新发布下面的jquery代码：

$(function($) {
var num_cols = 3,
container = $('.split-list'),
listItem = 'li',
listClass = 'sub-list';
container.each(function() {
    var items_per_col = new Array(),
    items = $(this).find(listItem),
    min_items_per_col = Math.floor(items.length / num_cols),
    difference = items.length - (min_items_per_col * num_cols);
    for (var i = 0; i < num_cols; i++) {
        if (i < difference) {
            items_per_col[i] = min_items_per_col + 1;
        } else {
            items_per_col[i] = min_items_per_col;
        }
    }
    for (var i = 0; i < num_cols; i++) {
        $(this).append($('<ul ></ul>').addClass(listClass));
        for (var j = 0; j < items_per_col[i]; j++) {
            var pointer = 0;
            for (var k = 0; k < i; k++) {
                pointer += items_per_col[k];
            }
            $(this).find('.' + listClass).last().append(items[j + pointer]);
        }
    }
});
});

代码正确地将下面的列表分成三列，但我的div显示为四列，而不是列出的项目（我想要的）。我是jquery的新手，只是查看代码，似乎只有类中的项目＆＃34; split-list＆＃34;应该受到影响......有人可以向我解释发生了什么事吗？这是一个显示不良行为的小提琴：http://jsfiddle.net/EebVF/5/

<ul class="split-list">
   <li>list Item 1</li>
   <li>list Item 2</li>
   <li>list Item 3</li>
   <li>list Item 4</li>
   <li>list Item 5</li>
   <li>list Item 6</li>
</ul>
<div>I should be below the three columns.</div>

谢谢！

Answer 1

<强> TL; DR：

将clear: both添加到该div的样式中。

要回答关于为什么会发生这种情况的问题，jQuery插件会将float属性设置为它创建的所有ul元素。通常在浮动元素的一部分后，您需要clear the formatting（clear: both）继续正常。

clear属性的默认选项为none（下面定义），因此下面的div将自动允许浮动元素与其对齐，除非您告诉浏览器不要。

无：默认。允许两侧浮动元素

如果您检查这些元素，您会看到ul元素已添加float: left。

修正：

<ul class="split-list">
   <li>list Item 1</li>
   <li>list Item 2</li>
   <li>list Item 3</li>
   <li>list Item 4</li>
   <li>list Item 5</li>
   <li>list Item 6</li>
</ul>
<div style="clear: both">I *WILL* be below the three columns.</div>

Fiddle

jquery将列表拆分为三列

1 个答案: