html - CSS float div，它们之间有边距(描述中的示例 img)

Question

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

但是，如果右侧卡片上没有 margin ，我如何获得它们之间的 margin 。这些 div 是动态生成的，所以我不能在第二个 div 上使用不同的类来定位它。

有什么想法吗？

Answer 1

如果我想在没有脚本或后端干预的情况下严格地在 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/

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