如何在浮动div之间放置空格？

我有一个父div，它可以改变它的大小，这取决于可用空间。在那个div里面，我有浮动div。现在，我想要在这些div之间有空格，但是没有空格给父div（参见图）。如何在浮动div之间放置空格？

enter image description here

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

谢谢

2011-10-06 ghost23

我找到了解决办法，至少在我的处境有所帮助，它可能不适合其它情况：

我给我所有的绿孩子的div一个完整的保证金：

margin: 10px;

而对于周围的黄父DIV我设置了负边距：

margin: -10px;

我也不得不删除任何明确的宽度或高度设置为黄父格，否则它没有ñ工作。

这样，绝对地说，子div是正确对齐的，尽管父黄色div显然是关闭的，在我的情况下是OK的，因为它不可见。

来源

2011-10-07 10:01:05 ghost23

这种方法只有一个缺点：如果您的父div与页面的右侧齐平（或在其10px内），则10px的负边距将与窗口边缘重叠，扩大页面并导致水平滚动条。这对于响应式设计来说可能更具问题，您需要开始处理总宽度有时小于320像素的视口宽度。 – thomasrutter

注意：那说，我当然没有找到更好的解决方案。 – thomasrutter

是的，你说得对。正如我所说，这当然不适用于所有情况。 – ghost23

添加margin到您的div风格

margin:0 10px 10px 0;

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

来源

2011-10-06 15:51:07 Jeff

但在底部也留有边距，意味着底部绿色div与黄色div底部边界之间的空间。不要那样。 – ghost23

对不起。我正在阅读你的文字，没有仔细检查你的图表。我不认为有一个纯粹的CSS解决方案 - 当然不是一个好的跨浏览器。我将使用JavaSCript来确定哪些div位于第二行，为它们分配一个类并给这个类'margin-bottom：0'。我不认为你会好得多。 – Jeff

这将为所有div添加边距底部，并在此处讨论不需要的主要div创建空间。 – punit

是它不只是施加适当的类每格的情况？

例如：

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

，如果你知道这取决于提前其中div来适用的类。

来源

2011-10-06 17:07:31 usefulcat

嗨，是的，好吧，正如我试图说的，divs是浮动的，父div可以改变它的大小，所以我不知道，每个div都会在哪里。 – ghost23

对不起，回答旧的文章，但你可以做到以下几点：

假设你容器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和更早版本除外。

来源

2013-08-08 14:37:37 Coreus

嗨，谢谢你的回答，但正如我在我的问题中所说的那样，容器可以改变其大小，因此可能会有超过三个div的空间。 – ghost23

我很晚参加派对，但是......我有类似的情况出现，我发现padding-right（当然还有底部，顶部，左边）。从我了解它的定义的方式来看，它将填充区域放在的内部div中，所以不需要在父级上添加负边距，就像您对边距所做的那样。

padding-right: 10px;

这对我来说伎俩！

来源

2013-09-11 03:38:25 SolarBear

由于此填充位于div内，因此它将具有div的背景颜色。在这种情况下，绿色div的右边缘将为10px的绿色。例如，如果绿色div包含文本，它将确保在该10px中没有文本 - 但它不会使该区域变为黄色。因此在OP的情况下没有用处。但是让人们知道的很好。 – ToolmakerSteve

稍后回答。

如果你想使用这样的网格，你应该看看Bootstrap，它相对容易安装，并且它给你你正在寻找的东西，所有的东西都包裹在漂亮而简单的html/css +中轻松地使网站响应。

来源

2016-03-15 11:15:05

举个例子！只是“使用Bootstrap”根本没有帮助我。其实我*是*使用Bootstrap并有这个问题。 –

如何在浮动div之间放置空格？

回答

相关问题