CSS-如何在浮动div之间放置间距?

我有一个父div,它可以根据可用空间来更改其大小。 在那个div中,我有浮动div。 现在,我希望这些div之间有间距,但父div上没有空间(请参见图)。

enter image description here

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

谢谢

ghost23 asked 2020-07-30T16:14:27Z
6个解决方案
34 votes

我找到了一个解决方案,至少对我的情况有所帮助,它可能不适用于其他情况:

我给所有绿色孩子的div完整保证金:

margin: 10px;

并且为周围的黄色父级div设置了负边距:

margin: -10px;

我还必须删除黄色父div的任何显式宽度或高度设置,否则它将不起作用。

这样,从绝对意义上讲,子div正确对齐,尽管父黄色div显然已被取消,在我的情况下这是可以的,因为它将不可见。

ghost23 answered 2020-07-30T16:15:03Z
14 votes

很抱歉回答旧帖子,但是您可以执行以下操作:

假设您的容器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等于输出的第四个元素,并且仅当您知道连续显示多少个元素时,该数字显然才有效,但是应该举例说明。 有关第n个孩子的更多详细信息,请参见此处。

注意:要使:first-child在IE8和更早版本中工作,必须声明<!DOCTYPE>

注意2::nth-child()选择器在IE8和更早版本中受所有主流浏览器支持。

Coreus answered 2020-07-30T16:15:41Z
6 votes

margin添加到您的div样式

margin:0 10px 10px 0;

[HTTP://呜呜呜.我3schools.com/CSS/CSS_margin.asp]

Jeff answered 2020-07-30T16:16:07Z
3 votes

我参加聚会很晚,但是...我也遇到了类似的情况,我发现向右填充(当然,底部,顶部,左侧也是如此)。 从我理解它的定义的方式来看,它在内部div内放置了一个填充区域,因此无需像对边距那样在父级上添加负边距。

padding-right: 10px;

这为我成功了!

SolarBear answered 2020-07-30T16:16:33Z
0 votes

不仅仅是在每个div上应用适当的类的情况?

例如:

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

这取决于您是否预先知道将哪个div应用于哪个类。

usefulcat answered 2020-07-30T16:17:02Z
-1 votes

答案有点晚。

如果您想使用这样的网格,则应该看一下Bootstrap,它相对容易安装,并且可以为您提供所需的内容,所有内容都封装在漂亮而简单的html / css中,并且易于制作。 网站响应迅速。

John Bertelsen answered 2020-07-30T16:17:27Z
translate from https://stackoverflow.com:/questions/7676951/how-to-put-spacing-between-floating-divs