jQuery/css：液体响应同位素网格与方格

Question

我想弄清楚，如果它的所有可能有方形div与流体同位素布局。我有一个4列的网格，每个div是容器的24％宽度，但我希望这些div是完美的方格，我无法弄清楚如何实现这一点。
这里有一个工作的jsfiddle演示：http://jsfiddle.net/RJZu6/8/
的jQuery：

var $container = $("#main-grid"); 

var size = function() { 
    $container.isotope({ 
     masonry: { 
      columnWidth: $container.width()/4 
     } 
    }); 
} 

$container.imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector: ".grid-block", 
     animationEngine: "jquery", 
     sortBy: "random", 
     resizable: false, 
     masonry: { 
      columnWidth: $container.width()/4 
     } 
    }); 

    size(); 
}); 

$(window).smartresize(size); 

CSS：

#main-grid { 
    position: absolute; 
    width: 100%; 
} 

.grid-block { 
    width: 24%; height: 50px; 
    margin-left: 0.25%; margin-right: 0.25%; 
    margin-bottom: 5px; 
    background: no-repeat 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

流动性和功能性的作品很好，我现在遇到的麻烦的div的只是尺寸。它完全有可能具有完美的方形响应div吗？

Answer 1

根据你内部的内容，你可以很容易地实现流体正方形使用 padding-bottom;

例如

width: 50%; 
height: 0; 
padding-bottom: 50%; 

所以this updated fiddle一切，我改变了的grid-lock

.grid-block { 
    width: 24%; 
    margin-left: 0.25%; margin-right: 0.25%; 
    margin-bottom: 5px; 
    background: no-repeat 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    padding-bottom:24%; 
} 

Here's an example of square elements in a page

的CSS

Here's more information about the technique.