javascript - 如何在不在列表项之间创建空白垂直空间的情况下将单个列表(不同的文本长度)分成两个相等的列？

Question

我必须处理通过 php 输出的动态代码，而且我只能使用 css 和 javascript。

我有一列列表项(不使用

标记)，我需要将其分成两列(顺序无关紧要)。目前，我给每个元素都添加了“float: left;”的 css。和其他所有元素(使用 javascript)的 css 'clear: left;'并具有预定义的宽度，以便它们平均分为两列。

但问题是，在当前设置中，当左侧列中的列表项较高时，右侧较短的列表项会在其下方获得一个空白区域。

有没有办法在不创建任何不必要的垂直空间的情况下将列表编码为两列？

Answer 1

这是一个 fiddle 。由于您可以使用 javascript，我假设您可以加载 jQuery。

http://jsfiddle.net/manishie/r4zkp/3/

HTML:

<div id="wrapper">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three three three three three three three three </li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ul>
</div>​

CSS:

.left_list, .right_list {
    float: left;
    width: 100px
}

Javascript:

$(function() {
    left_list = $('li:even');
    right_list = $('li:odd');
    $('#wrapper').html('');
    $('#wrapper').append('<div class="left_list">');
    $('.left_list').html(left_list);
    $('#wrapper').append('<div class="right_list">');
    $('.right_list').html(right_list);
});

​