HTML/CSS - 调整大小的 3 列答案

【问题标题】：HTML/CSS - 3 columns that resizeHTML/CSS - 调整大小的 3 列
【发布时间】：2012-09-07 12:16:25
【问题描述】：

我正在构建一个非常简单的页面，由 tumblr 提供支持。

它在主要区域有 3 列内容。内容 div 都设置为 33% 的宽度并向左浮动，大多数情况下它会按照您的预期自行排列，但是当您调整窗口大小时，它似乎有时会恢复为 2 列。有谁知道如何解决这个问题？

【问题讨论】：

【解决方案1】：

尝试将 .item css 宽度设置为：32%。浏览器有时可能会错误计算宽度，因此您可能有一两个额外的像素，因此浮动重叠到下一行。

【讨论】：

【解决方案2】：

涉及到 Javascript 操作。您的article html 元素获取绝对位置和一些坐标。查看这些脚本（或禁用它们，以便仅使用 CSS 进行定位）。

【讨论】：

他正在使用masonry，这是一个插件，用于在网格中定位不同大小的元素。
Masonry 被我最初用作基础的主题所使用。我对 javascript/jQuery 的了解还不够，无法完全理解它为什么会导致问题。我注意到了这个页面：iam.beyonce.com 完全按照我的意愿工作，并且还使用了砖石，但我还无法弄清楚其中的区别。
在您使用砖石的方式和其他网站如何使用砖石方面存在大量差异。通过使用jsbeautifier.org，您可以获得static.tumblr.com/rseu6su/4vem9mru3/script.min.083112.js 代码并使其更具可读性。在那里，例如检查masonryStart 函数并比较它是如何开始你自己的。这只是不同之处之一。虽然，我确实认为列的问题与上面提到的 CSS 相关。

【解决方案3】：

在您的具体情况下，有几种解决方案：

免责声明：对于所有在阅读table时哭泣的人：

使用分区来模拟表格以显示表格数据与使用表格来控制图形和页面布局一样是设计缺陷。

【讨论】：