Question

我使用Pods插件创建了一个网格。出于某种原因，每个div的 bottom 都有额外的像素（参见空白区域）。我已多次浏览代码，但无法找到原因。下面是网格的css。有人知道白色空间的来源吗？

link：http://test.mpluczenik.com/#work

谢谢！

的functions.php：

// Add Image size for Portfolio List
if ( function_exists( 'add_theme_support' ) ) { 
add_theme_support( 'post-thumbnails' );
// additional image sizes
add_image_size('portfolio-thumb', 300, 300, true ); // (cropped)
}

Pods模板：

<div class="portfolio-list">
<a href="{@permalink}">
    <div class="overlay">
        <a href="{@permalink}">{@post_thumbnail.portfolio-thumb}
        </a>
        <p>
        <a href="{@permalink}">{@post_title}
        </a>
        </p>
    </div>
</a>

CSS：

div .portfolio-list{
border: 0px;
padding: 0px;
width: calc(20%);
overflow: hidden;
position: relative;
display: inline-block;
float:left;

}

img.attachment-portfolio-thumb{
width:100% !important;
height:100%!important;
}

div .portfolio-list p{
display: none;
color:#000;
}

div .overlay:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(234,79,38,.75);
width: 100%;
height: 100%;
border:none;
margin:0;
padding:0;

}

div .portfolio-list:hover p {
display:block;
z-index: 9999;
position:absolute;
bottom:50px;
left:0px;
text-align: center;
width:100%;
overflow:hidden;
color:#fff;
margin: 0px;
}


div .portfolio-list:hover a{
color:#fff;
font-weight: bold;
opacity: 50%;
}

谢谢！

Answer 1

内联块具有行高，这是额外空间的来源。您可以通过将line-height: 0添加到css选择器div .portfolio-list来删除行高。更多信息here。

使用calc（）的网格显示额外的像素

1 个答案: