0

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

根据数据库中的文本，每个框可能具有不同的高度。每个盒子都是一个 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 计算，我应该如何进行？

4

1 回答 1

2

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

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

http://masonry.desandro.com/

于 2013-04-09T10:09:43.370 回答