необходимо выровнять часть элемента списка справа от li - используя CSS3 Jquery column-layout

Question

Использование этого скрипта jquery для получения 3-х колонок CSS3, для отображения списка членов в алфавитном порядке.

Мне нужно, чтобы он отображался следующим образом:

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>

Вы должны знать, что во время тестирования я обнаружил другие проблемы с техникой с этого сайта (и, следовательно, вероятно, почему он указан как бета-версия). Я изменил UL на OL, чтобы увидеть, сколько элементов я создал в тестовом коде. Каждый столбец начинал нумерацию с номера последнего элемента предыдущего столбца (т.е. последний номер элемента в столбце 1: 7, номер первого элемента в столбце 2: 7).

Answer 2

Я бы попробовал одну из двух вещей:

Оберните каждое имя с пролетом, оставленным слева, как это:

<li>
    <span style="float:left;">Doe, Sally</span>
    <div style="float:right;">
        8729
    </div>
</li>

Поместите каждое расширение div перед соответствующими именами в HTML-коде так:

<li>
    <div style="float:right;">
        8729
    </div>
    Doe, Sally
</li>

Answer 3

Если проблема не в ограничениях этой бета-версии

(BrendonKoz уже указывал на это, но вполне вероятно, что мы, безусловно, должны принять их ограничение № 5 "Помните, что разметка вашей страницы модифицируется JavaScript, поэтому возможно, что некоторые правила CSS могут не работать после многостолбцовый макет применяется "для того, что это значит",

на ровном месте, я бы попытался

.Article3Col li {
   clear: both;
}

в моей таблице стилей.

Если этого не произойдет, Firebug (или эквивалент, если таковой имеется) будет полезен, чтобы рассказать вам, что 3-колоночный скрипт изменен в вашей DOM, и что нужно адаптировать в вашем CSS, чтобы соответствовать как вашей новой DOM и ваши требования к дизайну.