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

我不知道有什么纯 CSS 技术可以一般地处理这个问题。

我已经放弃并在过去使用 jQuery 插件来完成类似的事情:

jQuery Masonry

(还有一个原始的 JavaScript 版本:Vanilla Masonry)

一图胜千言: