标准化一行缩略图之间的空间

Question

我有一个780px宽度的容器，我想适合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>

Answer 1

使用css3设置每隔4个元素的距

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

看这个

Answer 2

例如，如果你需要间距为20px，你可以这样做:

780-60=720块可用空间

720/4=180 your block width

.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 3

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

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

检查这个http://jsfiddle.net/ychX4/

可以通过第n个子Css选择器使用此操作。但是ie浏览器不支持。Ref: http://css-tricks.com/how-nth-child-works/

好运. .)