jQuery/css : 사각형 div가있는 유체 반응 형 동위 원소 격자

Question

유체 동위 원소 레이아웃을 사용하여 사각형 div를 가질 수 있는지 알아 내려고합니다. 각 열은 컨테이너의 너비가 24 % 인 4 열 그리드를 가지고 있지만이 div가 완벽한 사각형이되기를 원하며이를 달성하는 방법을 찾을 수 없습니다. http://jsfiddle.net/RJZu6/8/
jQuery를 :
다음은 작업 jsfiddle 데모입니다

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.