CSS浮动图像，每行删除边距

Question

我试图对齐多个图像或DIV。 我从wordpress获得了内容。

#wrapper{    
width:800px;
}

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

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

我找到了

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

帮助我完成第一行，但下一行再次被“打破”。 如何用^ n图片连续对齐6幅图像？

Answer 1

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

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

请参阅jsfiddle here

或者你只能做CSS，但这只适用于真正的浏览器（不在＆lt; = IE8中）

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

请参阅jsfiddle here

Answer 2

听起来像图像的总宽度，填充和边距对于容器宽度来说太宽。尝试增加容器宽度以确认这一点。