CSS溢出定位答案

【问题标题】：CSS overflow positioningCSS溢出定位
【发布时间】：2012-02-21 14:36:03
【问题描述】：

这是一个很难描述的问题，所以我认为这张图会有所帮助：

这是设置-

.column {position: absolute; width: specific;} // each positioned with javascript
.post {position: relative; margin: specific; width: either 100% or specific;}

问题是，如果第一个帖子超出了其列的宽度，我怎样才能让另一列中的帖子做出反应并且只从较大的帖子开始？我只需要它与第一个一起工作，我不认为浮动帖子有什么不同。我知道这可以用 javascript 轻松完成，但是帖子会在悬停时展开，所以在 css 中会更好。有没有办法做到这一点？我是否必须更改列的位置样式？还是只有js才有可能？

即使您想不出解决方案，我也将不胜感激。

【问题讨论】：

您是否尝试过浮动它们并应用 clear: left 到帖子？
鉴于一切都使用 JavaScript 定位，我认为我们需要查看该脚本。此外，您希望输出看起来如何的示例图也会有所帮助。如果您因代表无法发布第二张图片，只需将图片的链接作为文本添加，我或其他有足够代表的人会将图片添加到您的问题中。
可以用浮点数轻松完成：jsfiddle.net/VPF4F/2，不知道为什么需要相对或绝对定位？这是某种实验吗？
基本上它是一个 tumblr 主题，可以选择列的数量和帖子之间的空间和帖子的宽度，所以它更容易定位所有内容并使用 js 和三个值设置容器宽度，而不是疯狂它需要的 CSS 数量；这也是为什么结构和顺序相当严格的原因。从那以后，我只是让它与 javascript 一起工作，有点，有些列是相对的，有些是绝对的。看这里elphinstonetheme.tumblr.com
@DavidThomas 那张照片是我希望帖子被定位的位置，html 位于该结构中。至于 javascript，没有所有代码就没有多大意义，但现在就是这样（阅读上面的评论以了解更改）：

标签： positioning css

【解决方案1】：

如果您想要一个很好的解决方案来解决多个 div 更改位置以及其他问题，那么 david desandro 的 masonry js 插件可能适合您：

http://masonry.desandro.com/

您必须使用浮点数并让插件完成其余的工作。在调用插件生效时应用 isResizable 和 isAnimated 选项（isResizable = true;, isAnimated = true;）应该这样做。

【讨论】：