CSS 浮动 div 之间有边距（描述中的示例 img）答案

【问题标题】：CSS floated divs with margin between them (example img in description)CSS 浮动 div 之间有边距（描述中的示例 img）
【发布时间】：2011-08-30 08:36:24
【问题描述】：

这可能是一个经典问题，但我似乎无法找出解决方案。我有许多需要包装在容器中的 div。通过添加float: left 和固定宽度，这非常简单。

但是，我如何在右侧卡片上没有保证金的情况下获得它们之间的保证金。这些 div 是动态生成的，因此我不能在第二个 div 上使用不同的类来定位它。

有什么想法吗？

【问题讨论】：

我不想这么说，但真的看起来可能是的情况 :)

标签： html css css-float

【解决方案1】：

不妨试试：

http://snook.ca/archives/html_and_css/getting_your_di

我想出的另一种方法是，您需要为包含 div 留出空间：

<style>
    #container {
        background: white;
        width: 510px;
        height: 610px;
        position: absolute;
    }
    #container2
    {
        width: 520px;
        position: absolute;
    }
    .card {
        background: grey;
        margin: 5px;
        float: left;
        width: 250px;
        height: 300px;
    }
</style>

<div id="container">
</div>
<div id="container2">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

【讨论】：

我猜你可能不想走这条路，因为它实际上使它成为一张桌子.. :-\ 不过那里有一些有趣的讨论。

【解决方案2】：

如果我想在没有脚本或后端干预的情况下在 CSS 中严格执行此操作，我可能会使用 nth-child 属性：

CSS

.card { width: 60px; height: 100px; background-color: #ededed; border: 1px solid #999; }
.card:nth-child(even) { float: left; }
.card:nth-child(odd) { float: right; }
#container { width: 130px; }
#header { width: 100%; color: #fff; background-color: #000; margin-bottom: 3px; }

HTML

<div id="container">
    <div id="header">header</div>
    <div class="card">0</div>
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
</div>

http://jsfiddle.net/bpMCB/

当然，您必须调整尺寸以适应您想要做的事情。

【讨论】：

【解决方案3】：

我有时使用的一个技巧是添加一个额外的更宽的 div 以允许浮动，然后隐藏顶级 div 上的任何重叠。没有例子很难解释 - so here is one

.inner div 包含浮动，因为它宽了 10px，而 .outer div 裁剪了这 10px。

HTH :)

【讨论】：