我目前正在将一些 Masonry 元素加载到表格单元格中,问题是浏览器无法计算表格单元格的宽度,因此当我调整浏览器宽度时,Masonry 元素不会自行重新对齐。
这篇文章似乎讨论了类似的问题,但我无法让它工作here
CSS 看起来像这样,Masonry Items 被加载到#Gal1 元素中。
div#wrapper{display:table; height:100%; width:100%;}
div#sidebarWrapper{display:table-cell; min-width:40px; height:100%; background-color:#444;}
div#contentWrapper{display:table-cell; height:100%; position:relative;}
div#content{border-left:1px solid #ddd; border-top:1px solid #ddd; overflow:hidden;
padding-bottom:100px; margin-top:195px;}
div#masonryGal{max-width:1600px; position:relative; height:500px; overflow:hidden;}
#gal1{}
我在网络上看到有关将透明图像设为 100% 宽度以便用某些东西填满容器的信息?这是要走的路吗,我是否必须在元素 #contentWrapper 中重复它?
这将如何影响我的 jquery?
jQuery(document).ready(function($) {
$('#gal1').masonry({
singleMode: true,
"gutter": 0,
isFitWidth: true,
isAnimated: true
}).imagesLoaded(function() {
$('#gal1').masonry('reload');
});
同样,这里的问题是我在表格中使用 Masonry,我在响应式布局中使用它,这正是我现在所处的情况,所以请不要“使用 div”。
最佳答案
绝对定位元素(masonry使用绝对定位 block ,计算它们的位置,它们的容器不能显示:table或table-cell)不能在table或table-cell内
更新
http://css-tricks.com/absolutely-position-element-within-a-table-cell/
关于javascript - 使砌体画廊在表格单元格 div 内工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20671724/