我正在试图弄清楚它是否可能具有流体同位素布局的方形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?
答案 0 :(得分:7)
根据内容的内容,您可以轻松使用流畅的方块
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%;
}