缩略图显示不正确答案

【问题标题】：Thumbnails not displaying correctly缩略图显示不正确
【发布时间】：2014-05-05 02:26:05
【问题描述】：

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

这是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

【问题讨论】：

标签： html css bourbon neat

【解决方案1】：

你需要为<li>指定一个高度

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

【讨论】：

它是响应式的。所以你认为给身高是可以的。
响应式通常是指宽度灵活，除非您需要更改图像大小，否则应该可以正常工作。