css: 50% 宽度 div 之间的 20px 间距答案

【问题标题】：css: 20px gutter between 50% width divscss: 50% 宽度 div 之间的 20px 间距
【发布时间】：2013-09-12 03:30:43
【问题描述】：

我有一个 100% 宽度的容器 div，里面有 2 个 .block div，宽度均为 50%，显示内联块并向左浮动。是否有可能在这些 div 之间有一个一致的 20 像素间距？
我尝试了一种简单的方法，将它们的宽度分别设置为 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;
}

任何建议将不胜感激！

【问题讨论】：

Will this suit?
注意：这不是最好的解决方案。但是如果你赶时间，你可以看看this作为一个选项。

标签： html css css-float

【解决方案1】：

如果包装 div 可以接受，我可以为您提供帮助。秘密（通常是）在* {box-sizing: border-box;}。

Fiddle.

【讨论】：

使用此技术，您可以获得任意数量的列。
+1，虽然我不建议将border-box 放在* 选择器上，除非你真的需要；只需将其应用于特定元素。
取决于你如何滚动我猜。我只是接受了 Paul Irish 的话，从那以后我就再也没有回头。 paulirish.com/2012/box-sizing-border-box-ftw

【解决方案2】：

我会在父容器上使用填充，然后将子容器设置为 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;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

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

谢谢

【讨论】：

在大屏幕上看起来很糟糕！
没关系。只要您将宽度减小一个百分点并使用固定像素宽度作为边距，您就不会获得所需的结果。现在它在小屏幕上看起来不对。

【解决方案5】：

如果您的browser support 要求允许，您可以使用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 */
}

【讨论】：