2个CSS列将文本拆分为下一列

Question

我有以下设置：

<div id="albums">
    <ul>
        <li>
            <a href="">
                <img src="album1/cover/image/here" />
            </a>
            <article>
                <h4>Album1 title</h4>
                <p>Album1 Description</p>
            </article>
        </li>
        <li>
            <a href="">
                <img src="album2/cover/image/here" />
            </a>
            <article>
                <h4>Album2 title</h4>
                <p>Album2 Description</p>
            </article>
        </li>
    </ul>
</div>

列表项是动态生成的，每页显示十个 我希望将它们显示在两列中，并将每个列表项单独显示为一个块。除了下一个列表的文章部分溢出到下一列之外，这样做还可以。

请查看下面的链接，查看解释我的意思的图片 http://ubuntuone.com/4O59Hy13A14rzfPu3N5pcL
如您所见，红色边框表示一个列表项，其文章部分已溢出到下一列。

我的CSS：

#albums {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}
#albums li {
    display: block;
    border: 1px solid #aaa;
    width: 295px;
    margin-bottom: 15px;
    box-shadow: 0 0 2px #ccc;
}
#albums li img {
    display: block;
    width: 100%;
    height: auto;
}
#albums li article {
    padding: 5px 5px 10px 5px;
}

任何有助于使整个列表像一个块一样的帮助表示赞赏 Thanxs