вопрос выравнивания css

Question

У меня проблемы с выравниванием неупорядоченных списков так, как я хочу.Вот изображение того, чего я хочу достичь.Как сделать так, чтобы версия выглядела как версия справа?

У меня будет от 1 до 6 неупорядоченных списков в зависимости от страницы, поэтому мне нужно общее решение.Вот урезанная версия CSS и HTML, который я использую:

CSS:

    body { margin: 50px auto; width: 500px; }
    ul { 
        float:left;
        margin: 0 20px 20px 0;
        padding: 0;
        width: 200px; 
    }
    li { 
        background: #ddd;
        list-style: none;
        margin: 1px 0;
        padding: 5px
    }
    li.title { background: #333; color: #fff; }

HTML:

<ul>
        <li class="title">Title A</li>
        <li>1A</li>
    </ul>
    <ul>
        <li class="title">Title B</li>
        <li>1B</li>
        <li>2B</li>
        <li>3B</li>
    </ul>
    <ul>
        <li class="title">Title C</li>
        <li>1C</li>
        <li>2C</li>
    </ul>

Answer 1

float:left нужное ul слева и float:right нужное ul справа.

Пример: http://jsfiddle.net/Xdyhy/

Answer 2

Я не знаю чистой техники CSS, которая могла бы обрабатывать это в общем .

Я отказался и использовал плагин jQuery, чтобы сделать это в прошлом для чего-то подобного:

jQuery Masonry

(Существует также необработанная версия JavaScript: Vanilla Masonry )

Картинка стоит тысячи слов:

Answer 3

использовать очистить: оба в ul

ul { 
        float:left;
        margin: 0 20px 20px 0;
        padding: 0;
        width: 200px; 
        clear:both;
    }

см. здесь

Answer 4

Попробуй поместить два левых списка в div и переместить этот div влево. Затем перемести оставшееся число справа вправо.

Вам нужно будет обернуть их все в один, содержащий div, иначе самый правый div улетит на край страницы.