Html 如何在浮动div之间放置间距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7676951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put spacing between floating divs?
提问by ghost23
i have a parent div, which can change its size, depending on the available space. Within that div, i have floating divs. Now, i would like to have spacing between these divs, but no space to the parent div (see drawing).
我有一个父 div，它可以根据可用空间改变其大小。在那个 div 中，我有浮动的 div。现在，我希望这些 div 之间有间距，但父 div 没有空间（见图）。
Is there a way to do this with CSS?
有没有办法用 CSS 做到这一点？
Thank you
谢谢
采纳答案by ghost23
I found a solution, which at least helps in my situation, it probably is not suitable for other situations:
我找到了一个至少对我的情况有帮助的解决方案，它可能不适合其他情况：
I give all my green child divs a complete margin:
我给我所有的绿色孩子 div 一个完整的边距：
margin: 10px;
And for the surrounding yellow parent div i set a negative margin:
对于周围的黄色父 div，我设置了一个负边距：
margin: -10px;
I also had to remove any explicit width or height setting for the yellow parent div, otherwise it did not work.
我还必须删除黄色父 div 的任何明确的宽度或高度设置，否则它不起作用。
This way, in absolute terms, the child divs are correctly aligned, although the parent yellow div obviously is set off, which in my case is OK, because it will not be visible.
这样，就绝对而言，子 div 是正确对齐的，尽管父黄色 div 显然被设置了，在我的情况下是可以的，因为它不可见。
回答by Coreus
You can do the following:
您可以执行以下操作：
Assuming your container div has a class "yellow".
假设您的容器 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;
}
The number 3n+1 equals every fourth element outputted and will clearly only work if you know how many will be displayed in a row, but it should illustrate the example. More details regarding nth-child here.
数字 3n+1 等于输出的每四个元素，并且显然只有在您知道一行中将显示多少个元素时才有效，但它应该说明示例。有关 nth-child 的更多详细信息请点击此处。
Note:For :first-child to work in IE8 and earlier, a <!DOCTYPE>must be declared.
注意：为了使 :first-child 在 IE8 及更早版本中工作，<!DOCTYPE>必须声明 a。
Note2:The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
注2：所有主流浏览器都支持 :nth-child() 选择器，IE8 及更早版本除外。
回答by Jeff
Add marginto your div style
添加margin到您的 div 样式
margin:0 10px 10px 0;
回答by SolarBear
I'm late to the party but... I've had a similar situation come up and I discovered padding-right(and bottom, top, left too, of course). From the way I understand its definition, it puts a padding area insidethe inner divso there's no need to add a negative margin on the parent as you did with a margin.
我参加聚会迟到了，但是......我遇到了类似的情况，我发现了填充右侧（当然还有底部、顶部、左侧）。从我的理解它的定义方式，它把一个填充区域内内div，因此没有必要添加父阴性切缘为你保证金一样。
padding-right: 10px;
This did the trick for me!
这对我有用！
回答by usefulcat
Is it not just a case of applying an appropriate class to each div?
不就是对每个 div 应用一个合适的类吗？
For example:
例如：
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
This depends on if you know in advance which div to apply which class to.
这取决于您是否事先知道要应用哪个类到哪个 div。
回答by John Bertelsen
A litte late answer.
有点晚的答案。
If you want to use a grid like this, you should have a look at Bootstrap, It's relatively easy to install, and it gives you exactly what you are looking for, all wrapped in nice and simple html/css + it works easily for making websites responsive.
如果你想使用这样的网格，你应该看看Bootstrap，它相对容易安装，它给你你正在寻找的东西，所有的东西都包裹在漂亮和简单的 html/css 中+它很容易制作网站响应。
