如何在浮动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等于输出的每四个元素,并且如果您知道将连续显示多少元素,则显然只能工作,但它应该说明该示例.关于nth-child的更多细节在这里.

注意:对于:在IE8及更早版本中工作的first-child,<!DOCTYPE>必须声明一个.

注意2:除了IE8和更早版本之外,所有主流浏览器都支持:nth-​​child()选择器.

Answer 3

添加margin到您的div风格

margin:0 10px 10px 0;

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