如何在浮动div之间放置间距？

Question

我有一个父div，它可以根据可用空间改变其大小。在那个div中，我有浮动的div。现在，我希望这些div之间有间距，但父div没有空格（见图）。

有没有办法用CSS做到这一点？

谢谢

Answer 1

我找到了一个解决方案，至少在我的情况下有所帮助，它可能不适合其他情况：

我给我所有的绿色孩子提供了一个完整的余地：

margin: 10px;

对于周围的黄色父母div，我设置了一个负边距：

margin: -10px;

我还必须删除黄色父div的任何明确的宽度或高度设置，否则它不起作用。

这样，从绝对意义上讲，子div正确对齐，虽然父黄色div显然已经设置了，在我的情况下是正常的，因为它不可见。

Answer 2

很抱歉回复旧帖子，但您可以执行以下操作：

假设你的容器div有一个“黄色”类。

.yellow div {
    // Apply margin to every child in this container
    margin: 10px;
}

.yellow div:first-child, .yellow div:nth-child(3n+1) {
    // Remove the margin on the left side on the very first and then every fourth element (for example)
    margin-left: 0;
}

.yellow div:last-child {
    // Remove the right side margin on the last element
    margin-right: 0;
}

数字3n + 1等于输出的每第四个元素，如果你知道连续显示多少元素，它们显然只能工作，但它应该说明这个例子。 More details regarding nth-child here

注意：对于：在IE8及更早版本中工作的第一个孩子，必须声明<!DOCTYPE>。

注2：所有主流浏览器都支持：nth-​​child（）选择器，IE8及更早版本除外。

Answer 3

将margin添加到div样式

margin:0 10px 10px 0;

http://www.w3schools.com/css/css_margin.asp

Answer 4

我迟到了，但是......我遇到了类似的情况，我发现padding-right（当然还有底部，顶部，左边）。从我理解它的定义的方式来看，它将填充区域放在内部div中，因此不需要像使用边距那样在父级上添加负边距。

padding-right: 10px;

这对我有用了！

Answer 5

这不仅仅是为每个div应用适当的类吗？

例如：

.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }

这取决于你是否事先知道哪个div适用于哪个类。

Answer 6

迟到的答案。

如果你想使用这样的网格，你应该看看Bootstrap，它相对容易安装，它可以为你提供你想要的东西，所有这些都包含在简单的html /中css +它可以轻松地使网站响应。