使砌体画廊在表单元格div中工作？

Question

I'm currently loading some Masonry items into a table-cell, the problem is that the browser has trouble calculating the width of the table-cell so the Masonry elements won't realign themselves when I adjust the browser width.

This article seems to discuss a similar problem but I can't get it to work here

The css looks like this and the Masonry Items are loaded into the #Gal1 element.

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{} 

I've seen around the web about making a transparent image 100% width so that it fills up the container with something? Is this the way to go and would I have to have it repeat inside the element #contentWrapper?

How would this affect my jquery?

jQuery(document).ready(function($) {
    $('#gal1').masonry({
        singleMode: true,
        "gutter": 0,
        isFitWidth: true,
        isAnimated: true
    }).imagesLoaded(function() {
        $('#gal1').masonry('reload');
    });

Again, the problem here is that I'm using Masonry inside a table, I'm using this inside a responsive layout and it's just the situation I'm in right now so please no "use a div".

Answer 1

absolute positioned elements (masonry use position absolute for blocks, to calculate their positions, and their container can't be display: table or table-cell) can't be inside table or table-cell

Update

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