CSS溢出定位
这是一个很难描述的问题,所以我认为这个图会有所帮助:
这就是设置 -
.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:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果你想要一个很好的解决方案来解决多个 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.