Question

我是Neat的新手。我正在尝试创建缩略图网格库。现在我已经设置了网格没有边距而且没有填充，但是不知何故，第一行和第二行之间存在间隙。它与li底部的图像之间的差距。我已将li标记为红色以显示差距。你能告诉我我在哪里做错了。感谢。

这是css

img {
    max-width: 100%;
    height: auto;
}
body {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
.mainContainer {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.mainContainer:after {
    content:"";
    display: table;
    clear: both;
}
.mainContainer .thumblist ul {
    margin: 0;
    padding: 0;
}
.mainContainer .thumblist ul li.block {
    float: left;
    display: block;
    margin-right: 0%;
    width: 25%;
    background-color: red;
}
.mainContainer .thumblist ul li.block:last-child {
    margin-right: 0;
}
.mainContainer .thumblist ul li.block:nth-child(4n) {
    margin-right: 0;
}
.mainContainer .thumblist ul li.block:nth-child(4n+1) {
    clear: left;
}

这是Html

<div class="mainContainer">
<div class="thumblist">
    <ul>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>    
    </ul>
</div>
</div>

我还上传了一个演示版，所以你可以看看这里。感谢。Demo

Answer 1

您需要指定<li>

的高度

.mainController .thumbnail ul li.block {
    height:150px;
}

缩略图无法正确显示

1 个答案: