我有一个几乎完成的设计，但我无法让 CSS 做我想做的事。我想做的是这样的：
但是，当页面生成时，输出如下所示：
我怎样才能让第三个盒子漂浮在第一个盒子下面和第二个盒子旁边？我已经尝试了我知道的每一个技巧，但无法让它发挥作用。我还应该提到，每个块都是通过从数据库中提取的 PHP 循环添加到页面中的，所以我有点受限于没有静态内容，并且无法提前知道特定块的高度成为。
问问题
85 次
4 回答
1
如果列数是可变的，CSS 就不能真正做到（如果你希望它在所有常见的浏览器中工作），所以改为使用旨在解决这个问题的jQuery Masonry 。
这是我说的同样的话，但有更多的话：CSS two columns with known children width
于 2012-05-02T16:00:37.820 回答
1
对于第二种布局，一个不错的选择是使用三个主要列。有几个可用的网格系统，包括Twitter Bootstrap和960 Grid，它们将帮助您快速布局基本框架并且没有怪癖。当 div（块元素）位于三列中的任何一列时，它们会自然地从上到下堆叠起来。
关于 div 的底部完美排列，您将能够使用 JavaScript 计算列的父级的总高度（自然会继承最高列的高度），计算块元素的总高度在每一列中，并使用 javascript 将高度差异添加到每个列的最低块元素。
请务必在 JS 高度计算中考虑填充和边距。
于 2012-05-02T22:28:41.580 回答
0
尝试将 div 放入 3 列，而不是按照它们出现的顺序堆叠它们。
于 2012-05-02T16:01:31.687 回答
0
这种行为是因为float规则。浮动元素的顶部不能超过页面正常流程中位于它之前的另一个元素的顶部。我不确切知道你如何定位你的元素，但你可能想调查一下。
这是浮动的 Css 规范：http: //www.w3.org/TR/CSS2/visuren.html#float-rules（它是 css2，但规则仍然适用）查看规则 5 和 6
于 2012-05-02T16:01:55.980 回答