我无法按照我希望的方式排列无序列表.这是我想要实现的目标的图像.我怎样才能让它看起来像右边的版本？
根据页面的不同,我将有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>
解决方法
我不知道一个纯粹的CSS技术,它可以一般地处理这个问题.
我已经放弃并使用了一个jQuery插件,以便在过去做类似的事情：
(还有一个原始的JavaScript版本：Vanilla Masonry)
一张图片胜过千言万语：
