php - css li 相互流动（附图片）

Question

我正在处理我的笔记应用程序，但我遇到了布局问题。链接到布局的屏幕截图。

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

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

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

到目前为止，结构如下：

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

            THE CONTENT

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

CSS样式：

• ol有显示：块；
• li 有显示：位置：相对；float:left（继承自 SPAN3 大小）；
• div 有边框：1px 灰色实体；

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

如果我需要使用 PHP 计算，我应该如何进行？

Answer 1

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

实现你想要的最常见的方法是使用一个名为 Masonry 的 jQuery 插件。

http://masonry.desandro.com/