Question

我有一个780像素宽的容器，我想每行装4个缩略图（我有多行）。

如何标准化缩略图之间的空间，以便第一个＆amp;连续第四个缩略图是否粘在容器的“墙”上？

我的代码：

<ul class="thumbnails">
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
   ...and so on
</ul>

Answer 1

例如，如果你需要在它们之间有20个像素的空格，你可以这样做：

780-60=720空间可用于块

720/4=180您的区块宽度

.thumbnails .card{
width:180px;
margin-left:20px;
}
.thumbnails .card:first-child{
margin-left:0px;
}

由于您已编辑过您的问题，我建议每行都有多个ul。

如果你坚持要有一个：

http://reference.sitepoint.com/css/pseudoclass-nthchild这可能会有所帮助：

.thumbnails .card:first-child, .thumbnails .card:nth-child(n5) {

Answer 2

使用css3来削减每个第4个元素的边距

li.card { 
  margin: 0 10px 10px 0;
}
li.card:nth-child(4n) {
  margin-right:0px;
}

请参阅此jsfiddle

Answer 3

此代码可能对您有所帮助。在容器中定义与缩略图宽度相关的宽度

    #container {
    width:200px;
    }
    #container ul li{
    display:inline-block;
    }

选中此http://jsfiddle.net/ychX4/

您可以使用nth-child Css选择器执行此操作。但Internet Explorer浏览器不支持。参考：http://css-tricks.com/how-nth-child-works/

祝你好运..）

CSS：标准化连续缩略图之间的空间

3 个答案: