需要使用CSS3 Jquery列布局将列表项的一部分对齐到li的右侧

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)

在每个成员的右侧,它有他们的电话分机,我想向右浮动,所以它易于阅读.

我尝试将手机扩展程序放在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中的第一个项目编号).