html - 元素之间的 CSS div 间隙

Question

我发现太多关于这个主题的引用已经回答了，但我没有找到一个满意的答案。

按照案例:

我创建了一个具有预期行为的极简主义 fiddle :

@ See fidlle

如果有 3 个单元格，我希望每个 div 之间只有间隔。这可能仅使用 CSS？

[HTML]

<div class="cel-1-2">
   Max Size of Objects in Cache (Shared Memory)
    <div class="cel-1-2">
        <input type="text" placeholder="foo" />
    </div>
    <div class="cel-1-2">
        <select>
            <option value="foo">bar</option>
        </select>
    </div>
</div>
<div class="cel-1-2">
    foobar
</div>

[CSS]

[class*=cel-] {
   padding-right:10px;
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;     
   box-sizing: border-box;
    background: blue;
}

.cel-1-2 {
    width: 50%;
    float: left;
}

input, select {
    width: 100%;
    float: left;
}

更清楚:

这就是我想要的

==>不是这个!

Answer 1

我不知道这里有什么问题。 这可以通过 CSS 轻松完成:

.parent {
   width: 100%;
   background: green;
    padding: 1em 0; 
    height: 500px;
}
.child {
    width: 30%;
    height: 200px;
    background: yellow;
    float: left;
}
.child + .child {
    margin-left: 5% /* 1 000 000 $ TIP */
}

现场演示:http://jsfiddle.net/hDqbk/