0

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

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

我的代码：

<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>
4

3 回答 3

1

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

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

看到这个jsfiddle

于 2013-01-17T08:39:50.360 回答
1

例如，如果您需要在两者之间留出 20px 的空间，您可以这样做：

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) {

于 2013-01-17T08:31:54.640 回答
0

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

    #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/

祝你好运..）

于 2013-01-17T09:04:28.387 回答