我遇到了一个问题,试图在网格中使用三种不同的图像尺寸时保持 Masonry 居中。
JS-
$('#container').masonry({
itemSelector: '.item',
//isFitWidth: true, // This setting ignores my max-width or width settings for #container but gives me the result that I'm looking for
columnWidth: 155
});
CSS -
#container {
max-width: 940px;
}
@media only screen and (max-width: 768px) {
#container {
max-width: 728px;
}
}
HTML -
<div id="container">
<ul>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
</div>
使用默认宽度(940 像素)时,砌体按预期工作,但如果我尝试使用最大解决方案为 768 像素的设备查看它,则网格项目不再居中。使用当前设置可以做到这一点吗?