css:50%宽度div之间的20px gutter

Question

我有一个100%宽度的容器div,.block里面有2个div,宽度均为50%,显示内联块并向左浮动.在这些div之间是否可以拥有一致的20px排水沟？
我尝试了一种简单的方法,将宽度设置为49%,左边的边距为2%,但理想情况下,如果可能的话,我希望在这两个div之间保持一致的20px排水沟.
jsFiddle演示:http ://jsfiddle.net/D6U3t/

HTML:

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS:

.container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 300px;
    background-color: silver;
}

.block {
    position: relative;
    width: 50%; height: 200px;
    background-color: red;
    display: inline-block;
    float: left;
}

任何建议将不胜感激!

Answer 1

如果包装 div 可以接受，我可以帮助你。秘密就在（通常如此）* {box-sizing: border-box;}。

小提琴。