jquery - 需要将列表项的一部分与 li 的右侧对齐 - 使用 CSS3 Jquery column-layout

Question

使用此 jquery 脚本实现 CSS3 3 列，以按字母顺序显示成员列表。

我需要它以这种方式显示，这是:

A   D
B   E
C   F

这是我正在使用的http://www.csscripting.com/css-multi-column/example6.php ？ (使用这个 js 文件 http://www.csscripting.com/js/v1.0beta/css3-multi-column.js )

在每个成员的右侧，它有他们的电话分机，我想将其 float 到右侧，以便于阅读。

我尝试将电话分机放在一个 div 和 span 中，当我这样做时，它往往会在每列的最后一项搞砸，通过正确放置人名，但他们的分机是第一个元素下一栏。

截图:http://cl.ly/fq4它在做什么

HTML代码:

<div class="Article3Col">
    <ul>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
        <li>Doe, John
            <div style="float:right;">
                8317
            </div>
        </li>
        <li>Doe, Sally
            <div style="float:right;">
                8729
            </div>
        </li>
    </ul>
</div>

CSS:

.Article3Col {
    column-count:3;
}

感谢任何帮助。

Answer 1

虽然我无法让它与您已经使用的标记(以及您提供的代码)一起使用，但我从您借用该技术的示例站点中获取了代码，并且能够找到以下解决方案额外的 CSS 和标记:

CSS:

li div { text-align:right; }
li div span { float:left; }

示例 HTML 代码段:

<li><div><span>Doe, John</span> 8317</div></li>

您应该知道，在测试过程中，我确实发现了该站点技术的其他问题(因此可能是它被列为 Beta 的原因)。我将 UL 更改为 OL，以查看我在测试代码中创建了多少项。每列从前一列的最后一个元素编号开始编号(即:col1 中的最后一个元素编号:7，col2 中的第一个元素编号:7)。