Question

使用Bootstrap 3时，我的Masonry画廊出现问题。每次重新加载页面时，网格中的每个图像都会添加一个边距。是什么原因导致了这个以及如何解决它？

这是我的代码：

<div id="gallery">          
    <div class="block">
        <img src="images/gallery/1.jpg">
        <a href="#">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                    <h1>Amazing Caption</h1>
                    <p>Whaterver It Is - Always Awesome</p>
                </div><!-- end caption-text -->
            </div><!-- end caption -->
        </a>
    </div><!-- end block -->    
</div><!-- end #gallery -->

<style>
#gallery{
    background: #EEE;
    max-width: 1600px;
    margin: auto;
    margin-top: 0;          
}       
.block{ 
    width: 20%;
    float: left; 
    background: #333;           
    overflow: hidden;       
    padding: 0px;
    position: relative;     
}
.block img{
    height: auto; 
    width: 100%;
    margin: 0px;
    padding: 0px;
    float: left;
    z-index: 4;
}
.block:hover .caption{
    opacity: 1;
}
.block .caption{
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;       
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
}
.block .blur{
    background-color: rgba(0,0,0,0.65);
    width: 100%;
    height: 100%;
    z-index: 5;
    position: absolute;
}   
.block .caption-text h1{
    text-transform: uppercase;
    font-size: 24px;
}
.block .caption-text{
    z-index: 10;
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    height: 100%;
    top: 35%;       
}
</style>    

<script>
    $(window).on('load', function(){
        $('div#gallery').masonry({
            columnWidth: '.block',
            itemSelector: '.block',             
            percentPosition: true
        });
    });
</script>

感谢您的回复。

Answer 1

您可以尝试将margin: 0;和line-height: 0px;添加到.block类“规则中。当一个容器只包含一个图像时，底部通常会有一些line-height: 0px;可以消除的空间。

砌体在重新加载后为元素增加了边距

1 个答案: