Html CSS浮动div，其间留有边距（说明中的示例img）

这可能是一个经典问题，但我似乎无法找到解决方案。我有许多div需要包装在一个容器中。通过添加

float:left

和固定宽度，这非常简单

但是，如果右手牌上没有保证金，我如何在他们之间获得保证金呢。这些div是动态生成的，所以我不能在第二个div上使用其他类来定位它

有什么想法吗

---

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

.internal div包含float，因为它的宽度为10px，而.outer div则裁剪这些10px

---

HTH:）

如果我想在CSS中严格执行此操作，而不需要脚本或后端干预，我可能会使用第n个子属性

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>


标题
0
1.
2.
3.
4.


当然，您必须对尺寸进行调整，以适应您正在尝试的操作。
可能需要尝试：


我提出的另一种方法是，您需要为包含的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>


#容器{
背景：白色；
宽度：510px；
高度：610px；
位置：绝对位置；
}
#集装箱2
{
宽度：520px；
位置：绝对位置；
}
.卡片{
背景：灰色；
保证金：5px；
浮动：左；
宽度：250px；
高度：300px；
}
我不想这么说，但看起来确实是这样：）我猜你可能不想走这条路，因为它实际上使它成为一张桌子不过，这里有一些有趣的讨论。