我只想将图像(项目)置于砌体网格(My Website)的中间。问题是图像总是向左倾斜。因此,我总是在砌体网格中的右边有一个间隙。
很抱歉这个糟糕的问题构成了,但这是我在这里的第一个问题,我现在正在努力解决这个问题3天。
这是我的代号。
var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
columnWidth: 50,
itemSelector: '.item'
});
图库代码如下所示。
<div id='masonry'>
<img class="item thumbnail" src="...">
<img class="item thumbnail" src="...">
<img class="item thumbnail" src="...">
<div>
这是CSS。
/* MASONRY GALLARY */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.thumbnail {
width: 100%;
padding: 0 0;
margin: 0 0.1px;
display: block;
border: hidden;
border-color: transparent;
}
.item {
min-width: 10px;
max-width: 600px;
min-height: 50px;
padding: 0 0;
margin: 0 0;
border: 0;
border-color: transparent;
}
#masonry {
margin: 0 auto;
}
答案 0 :(得分:0)
如果您想要两行中的图片,请删除所有js Script
并使用
columns: 2;
喜欢:https://www.w3schools.com/code/tryit.asp?filename=FNE2Q4DCPHM1