Question

我目前正在将一些砌体物品装入表格单元格，问题是浏览器无法计算表格单元格的宽度，因此当我调整浏览器宽度时，砌体元素将不会重新对齐。 / p>

这篇文章似乎讨论了类似的问题，但我无法让它工作here

css看起来像这样，而砌体物品被加载到＃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

绝对定位元素（砌块使用位置绝对是块，计算它们的位置，它们的容器不能显示：table或table-cell）不能在table或table-cell里面

更新

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

让Masonry gallery在table-cell div中工作？

1 个答案: