CSS溢出定位

发布于 2024-12-29 11:39:59 字数 533 浏览 0 评论 0原文

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

http://i41.tinypic.com/esvjgp。 jpg

这就是设置 -

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

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

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

This is quite a hard problem to describe so I think this diagram will help:

http://i41.tinypic.com/esvjgp.jpg

this is the setup-

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

The question is if the first post exceeds the width of its column, how can I make posts in another column react and only start under the larger post? I only need it to work with the first one, and I don't think floating the posts makes a difference. I know this can be done with javascript without much trouble, but the posts expand on hover so it'll be much nicer in css. Is there any way to do this? Do I have to change the position style of the column? Or is it only possible with js?

I'd appreciate any response even if you can't think of a solution.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浅暮の光 2025-01-05 11:39:59

如果你想要一个很好的解决方案来解决多个 div 改变位置的问题,那么 david desandro 的 masonry js 插件可能适合你:

http: //masonry.desandro.com/

您必须使用浮动并让插件完成其余的工作。在调用插件时应用 isResizing 和 isAnimated 选项(isResizing = true;, isAnimated = true;),这样就可以了。

If you want a nice solution to multiple divs changing places and what not, then david desandro's masonry js plugin could be for you:

http://masonry.desandro.com/

You would have to utilize floats and let the plugin do the rest though. Apply the isResizable and isAnimated options (isResizable = true;, isAnimated = true;) when calling the plugin into effect and that should do it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文