css - 具有相同类的 div 的两列布局......之间有一个空格

Question

有两个<div>元素，每个元素都有相同的类。将它们制作成两列布局很容易：http: //jsfiddle.net/Baumr/nbzHA/3/

所以这里有一个问题：

如何在它们之间添加空格？

制作两个单独的类并以任何一种方式浮动它们会很容易。或者添加一个类并使用边距：http: //jsfiddle.net/Baumr/sZehH/1/

但是如果他们在同一个班级/没有班级怎么办？

Answer 1

您可以使用伪类，例如:nth-child(n)或:first-child

section div:nth-child(1) { margin-right: 10%; }

Answer 2

在第一个 div 上添加 aclass是最好的浏览器兼容性解决方案，然后为此类添加您的样式。

我注意到你的小提琴有一些事情，这使得根据你对尼尔斯的评论来解决问题变得很复杂。您的小提琴中有一个section标签，它将在支持 html5 的浏览器中呈现。但是你想要兼容 IE7 和 IE6 吗？

IE7有多种方法，以下是其中一种：

.section div+div {
    margin-left: 10%;
}

此解决方案使用相邻的兄弟选择器，它在第二个 div 上添加了左边距。而且，section我使用 <>div 代替标签，class=section因为浏览器不支持section.

对于IE6，在两个 <>div 之一上添加一个类是我知道的唯一解决方案。