CSS Float Images，删除每行的边距

Question

我正在尝试对齐多个图像或 DIV。我从 wordpress 获取内容。

#wrapper{    
width:800px;
}

.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}

这会导致最后一张图片转到下一行。

我找到了

#wrapper div:first-child{
    margin-left:0px;
    }

帮助我处理第一行，但下一行又“断线”了。我怎样才能将 6 张图像与 ^n 图片对齐？

Answer 1

这确实是一个常见的设计问题。我曾经通过向容器添加 10px 来修复它，但现在我总是使用 jQuery 修复:

$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');

参见 jsfiddle here

或者你可以只用 CSS，但这只适用于真正的浏览器(不适用于 <=IE8)

.image:nth-child(6n+1) {
    margin-left:0px;
}

参见 jsfiddle here