由于有额外的保证金，停止方框会突破到下一行？

不知道这是否有可能，但我认为这值得提问。由于有额外的保证金，停止方框会突破到下一行？

我想要做的是通过我的PHP脚本轻松创建框，我不必检查每个框（.boxes）所属的列，行等。我只是想能够做一个foreach循环的框，并且它们是echo。

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

在这个例子中，你可以看到，我试图让wrapper（#main）忽略margin-right，并有每行有两个箱子，没有一点多余的而不必为每个其他DIV分配不同的类别。

任何帮助表示赞赏。

来源

2012-02-08 Josh Foskett

您可以使用nth-of-type(2n)来定位每隔一个div。然后将右边距设置为零。

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

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

来源

2012-02-08 04:11:41 mrtsherman

看到这篇文章，如果您有兴趣，为什么你可以选择'第n-的-type' VS'第n-child'在Danjah的答案。 http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/ – mrtsherman 2012-02-08 04:17:43

+1对于第Ⅴ类伏都教，我似乎永远不会变直。此外，如果您愿意忽略对几个没有人关心的浏览器的支持，那么它比我的回答更清洁/不那么讨厌。 – Zenexer 2012-02-08 04:23:05

oooh确实有一些巫术 - 好的提示，谢谢@mrtsherman :) – danjah 2012-02-08 20:43:51

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

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

来源

2012-02-08 04:14:30 danjah

#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要求。

来源

2012-02-08 04:16:07 Zenexer

+1 - 我喜欢它禅。 “开箱即用”的思考方式。潘打算。 – mrtsherman 2012-02-08 04:17:16

@mrtsherman哈哈，为什么感谢你。是的，我想这还是有点不对，不是吗？溢出的利润率从不会伤害任何人。 – Zenexer 2012-02-08 04:18:31

不确定您使用的是哪种浏览器，但它不适用于最新的Google Chrome浏览器。我最初试过这个（'overflow：hidden;'），但没有结果。 http://jsfiddle.net/LUFFP/7/ http://cloud.rastalulz.com/1U0G2n2y1i1j0I2l2f25 – 2012-02-08 04:21:00

尝试

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

来源

2012-02-08 04:18:59

您可以通过将每行预先加上四个空格或使用编辑器中的“{}”按钮来代码阻止您的帖子。 – mrtsherman 2012-02-08 04:20:49

如果您添加“overflow：hidden”，只要将宽度更改为404像素，红色将消失。 – Zenexer 2012-02-08 04:21:00

由于有额外的保证金，停止方框会突破到下一行？

回答

相关问题