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您想要的右侧。

示例：http://jsfiddle.net/Xdyhy/

Answer 2

我不知道纯粹的CSS技术可以处理这个一般。

我已经放弃并使用了一个jQuery插件来过去做类似的事情：

jQuery Masonry

（还有一个原始JavaScript版本：Vanilla Masonry）

一张图片胜过千言万语：

Answer 3

尝试将两个左侧列表放在一个div中并将该div向左浮动。然后将剩余的div浮动。

你必须将它们全部包含在一个包含div的内容中，否则最右边的div将飞到页面的边缘。

Answer 4

在ul

中使用清除：两者

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

请参阅 here