我正在使用同位素砌体画廊,但发现很难去除行之间的顶部/底部间隙(见图)
我该怎么办?
我正在使用的代码基于以下内容:http://simbyone.com/animated-masonry-gallery-with-filters/
如上所述,我直接从上面的URL中使用代码,包括javascript和CSS。使用php创建图像的html,但输出如下:
<div id="gallery-content">
<div id="gallery-content-center">
<div class='wrapper suggestion all film any later' id='3'>
<span class='relevance'>
<span class='badge'>87%</span>
</span>
<img src='cabinet/item/img/3.jpg' class='all film any later' alt='Film 1'/>
<span class='text'><i class='fa fa-check-circle-o btn-icon up'></i> <i class='fa fa-times-circle-o btn-icon down'></i> <i class='fa fa-heart-o btn-icon fav'></i><br>Film 1 later</span>
</div></div></div>
我也在图像上使用悬停文字:
.wrapper img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
.wrapper img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}
.wrapper .text {
position:relative;
bottom:65px;
left:10px;
width: 150px;
overflow: visible;
visibility:hidden;
color: #fff;
font-size: 20px;
}
.wrapper:hover .text {
visibility:visible;
}
.wrapper .relevance {
position:relative;
top:30px;
left:250px;
visibility:hidden;
color: #a9a9a9;
z-index: 99999;
}
.wrapper:hover .relevance {
visibility:visible;
}
.wrapper .relevance .badge {
font-size: 16px;
background-color: #333;
}
编辑:看来,如果我对.wrapper应用一个高度,它会处理它,但是由于图像的高度会发生变化,因此我似乎无法将其紧紧地包裹在其中的图像上。关于如何将其设置为高度的任何建议:自动只会使我失去已经拥有的东西
我发现了一种解决方法,尽管我不是100%,但是我在所有图像上添加了下边距:-25%,看来已经成功了。可能无法适应所有情况,但时间会证明一切
#gallery-content-center img {
width: 100%;
height: auto;
margin-bottom: -25%;
}
您可能需要与其一起使用imagesloaded插件,以便石工可以先确定所加载图像的高度,然后再调整位置。