[英]Center Masonry layout that has different sized images
在网格中使用三种不同的图像大小时,尝试保持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>
使用默认宽度(940px)时,石工可以按预期工作,但如果我尝试使用最大分辨率为768px的设备进行查看,则网格项目将不再居中。 使用当前设置可以做到吗?
我有一个类似的问题,我解决了将max-width设置为外部div的问题。
试试看:
JS
$('#container').masonry({
itemSelector: '.item',
isFitWidth: true,
columnWidth: 155
});
的CSS
#wrapper {
max-width: 940px;
}
@media only screen and (max-width: 768px) {
#wrapper {
max-width: 728px;
}
}
的HTML
<div id="wrapper">
<div id="container">
<ul>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.