由于额外边距，阻止框断到下一行？

Question

不确定这是否可能，但我认为值得一问。

我想做的是通过我的 PHP 脚本轻松创建框，我不必检查每个框 (.boxes) 属于哪一列、行等。我只是希望能够对框进行 foreach 循环，并echo它们。

这就是我所说的： http://jsfiddle.net/LUFFP/4/

在该示例中，您可以看到我试图让 wrapper (#main) 忽略 margin-right，并且每行有两个框，并且没有额外的空间是的，不必为每个人分配不同的类别其他DIV。

任何帮助表示赞赏。

Answer 1

您可以使用 nth-of-type(2n) 来定位所有其他 div。然后将右边距设置为零。

http://jsfiddle.net/LUFFP/5/

.boxes_3:nth-of-type(2n) { margin-right: 0px; }

Answer 2

根据您的浏览器要求，有一个 CSS3 选择器可以做到这一点：
http://jsfiddle.net/ttpK6/1/

兼容性列表：http://kimblim.dk/css-tests/selectors/

Answer 3

#main_2
{
    background: #FF0000;
    width: 404px;
    border: 1px solid #000;
    overflow: hidden;
}

.boxes_2
{
    background: #F3F3F3;
    width: 195px;
    display: inline-block;
    margin-right: 10px;
}

请注意，我更改了宽度并将溢出设置为隐藏。没有特殊的 CSS3 要求。

Answer 4

尝试一下

 #main_2 {background: #FF0000; width: 411px;  border: 1px solid #000;}
.boxes_2 {background: #F3F3F3; width: 205px;  float:left;}