html - css: 50% 宽度 div 之间的 20px 间距

Question

我有一个宽度为 100% 的容器 div，其中有 2 个.blockdiv，宽度均为 50%，显示内联块并向左浮动。在这些 div 之间是否有可能有一个一致的 20px 间距？
我尝试了一种简单的方法，将它们的宽度分别设置为 49%，并在左边有 2% 的右边距，但如果可能的话，理想情况下，我希望在这 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;}.

小提琴。

Answer 2

我用一个内部容器来解决这个问题。

fiddle: http://jsfiddle.net/kpwp7/4/

Answer 3

我会在父容器上使用填充，然后让子容器的宽度为 100%，高度为 100%。

查看我的 JSFiddle：http: //jsfiddle.net/D6U3t/10/

HTML

<div class="container">
    <div class="block first">
        <div class="inner-block"></div>
    </div>
    <div class="block second">
        <div class="inner-block"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.container {
    margin: 0;
    width: 100%; 
    height: 100%;
    background-color: silver;
}

.block {
    position: relative;
    width: 50%; 
    height: 200px;
    float: left;
}

.block.first {
    padding: 0 10px 0 0;
}

.block.second {
    padding: 0 0 0 10px;
}

.inner-block {
    height: 100%;
    width: 100%;
    background-color: red;
}

Answer 4

你必须再增加一门课。我认为它的工作。

    .block:last-child {
     margin-left:20px;
     float:right;
     }

& 将 .block 宽度减小到 49%。

查看小提琴：http: //jsfiddle.net/D6U3t/14/

谢谢

Answer 5

如果您的浏览器支持要求允许，您可以使用calc() CSS 函数：

http://codepen.io/troywarr/pen/MaVKGe?editors=110

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 {
    width: calc(50% - 10px); /* subtract half of 20px gutter */
    height: 200px;
    background-color: red;
}

.block:first-child {
  float: left;
  margin-right: 10px; /* half of 20px gutter */
}

.block:last-child {
  float: right;
  margin-left: 10px; /* half of 20px gutter */
}