javascript - 使砌体画廊在表格单元格 div 内工作？

Question

我目前正在将一些 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”。

Answer 1

绝对定位元素(masonry使用绝对定位 block ，计算它们的位置，它们的容器不能显示:table或table-cell)不能在table或table-cell内

更新

http://css-tricks.com/absolutely-position-element-within-a-table-cell/