3

我试图弄清楚是否有可能拥有具有流体同位素布局的方形 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？

4

1 回答 1

7

根据你里面的内容，你可以很容易地使用 padding-bottom;

例如

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

所以在这个更新的小提琴中，我改变的只是 CSSgrid-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%;
}

这是页面中方形元素的示例

这是有关该技术的更多信息。

于 2013-05-14T00:01:11.073 回答