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.