带 Masonry 堆叠的顶部/底部边距
我正在使用 JQuery 和 Masonry,正如您从图像中看到的那样,盒子没有正确堆叠。侧边距很大,但顶部/底部之间给出了随机的大空间。
有人可以在这里帮助我吗?
盒子的 CSS:
div.article {
background-color: white;
margin-right: 6px;
padding: 20px 10px;
width: 155px;}
问题的屏幕截图: https://skitch.com/subzane/f8n36/2010-andreas-normans-blogg
解决方案: 似乎只有在使用自定义字体时才会出现该错误。为了解决这个问题,必须使用 $(window).load() 而不是 $(document).ready() 来加载脚本。
I'm using JQuery and Masonry and as you can see from the image the boxes doesn't stack properly. The side margins are great but the top/bottom gives random amount of large space in between.
Anybody who can help me here?
CSS for the boxes:
div.article {
background-color: white;
margin-right: 6px;
padding: 20px 10px;
width: 155px;}
Screenshot of problem:
https://skitch.com/subzane/f8n36/2010-andreas-normans-blogg
Solution:
It seems the error only appeared when using custom fonts. And to fix that, the script must be loaded using Using $(window).load() instead of $(document).ready().
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
假设 div.article 也是您的砌体项目选择器,您需要将其向左浮动。
Assuming div.article is also your masonry item selector, you need to have it floated left.
我知道这是一个古老的问题,但我遇到了这个确切的问题。就我而言,解决方案是将宽度/高度添加到某些项目容器内的图像中。
I know this is an ancient question, but I had this exact problem. The solution, in my case, was adding the width/height to the images that were within some if my item containers.
是的,window.load() 可以工作,但是当我挖掘更多内容时,我发现某些项目之间隐藏着一个输入类型。查看您的项目列表之间是否有任何标签。
Yes, window.load() works but as I've dug more I found that there was an input type hidden in between some of the items. Take a look if you have any tag in between of your item list.