css li彼此流动（附图）

Question

我正在处理我的笔记应用程序而且我遇到了布局问题。 Link to the screenshot of the layout.

根据数据库中的文本，每个框可能具有不同的高度。每个方框都是LI（bootstrap span3大小）。

• 我需要盒子在没有空格的情况下很好地相互流动。

• 我已经看到一些网页计算每个框的PHP绝对定位，但我希望我只能用CSS实现。

到目前为止，结构如下：

<ol>
 <li class="memPersonUnit clearfix span3">
  <div class="memPersonUnitContainer clearfix">

            THE CONTENT

  </div>
 </li>
</ol>

css风格：

• ol有display：block;
• li有显示：position：relative; float：left（继承自SPAN3大小）;
• div有边框：1px灰色实体;

我应该如何改变我的CSS以实现我的目标？

如果我需要使用PHP计算，我该如何处理？

Answer 1

除非你创建内容块的各个列，否则你实际上无法在css中实现这一点，但如果你动态添加内容则不会真正起作用。

实现目标的最常用方法是使用名为Masonry的jQuery插件。

http://masonry.desandro.com/