浮动两个 50% 宽度的 div，中间有 10px 的边距答案

【问题标题】：Floating two 50% width divs with a 10px margin between浮动两个 50% 宽度的 div，中间有 10px 的边距
【发布时间】：2013-03-01 18:18:53
【问题描述】：

我想在我的页面上浮动一对流体 div，每个占据其容器宽度的一半，但它们之间的边距为 10px。我已经完成了这个 JSFiddle http://jsfiddle.net/andfinally/sa53B/5/，这是 HTML：

<div class="clearfix">
    <a class="prev" href="#">Previous</a>
    <a class="next" href="#">Next</a>
</div>

还有 CSS：

.prev {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 50%;
    margin-right: 5px;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 50%;
    margin-left: 5px;
}

box-sizing 规则不足以完成这项工作 - div 的宽度超过 50%。在this question 的答案之一中，有人建议使用 CSS 显示表。谁能解释一下如何在这种情况下进行这项工作？

谢谢！

【问题讨论】：

一定要10px吗？它也可以是一个流动的计量单位吗？你可以让两个容器宽 48%，然后给第一个 4% 的边距。
@chipcullen 虽然不会在两个 div 之间放置空间
@EricLemos - 我认为它会 - 见 jsfiddle.net/andfinally/sa53B/5
你期望margin 的值是多少？50% + margin + 50% == 100%？
我现在不能给你看，但是这对于额外的元素嵌套层来说是微不足道的。指定外部元素的宽度和内部元素的边距。

标签： html css

【解决方案1】：

您可以 a) 将 50% 降低到 48% 并设置边距 2% 或 b) 使用 CSS3 calc，并非所有地方都支持，但在不久的将来应该可以选择。（具体来说，当 IE8 不在桌面时）（请参阅http://caniuse.com/#feat=calc 以了解兼容性）

使用百分比的示例：http://jsfiddle.net/sa53B/9/

.prev {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 48%;
    margin: 0 2% 10px 0
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 48%;
    margin: 0 0 10px 2%
}

使用calc 的示例：http://jsfiddle.net/sa53B/6/

.prev {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 47%;
    width: -webkit-calc(50% - 5px);
    width: calc(50% - 5px);
    margin: 0 5px 10px 0;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 47%;
    width: -webkit-calc(50% - 5px);
    margin: 0 0 10px 5px;
}

【讨论】：

为信息丰富的答案干杯 Mooseman - 我还需要使用移动浏览器，因此目前 calc 不是我的选择。它是百分比！
calc 使用 Android 4.1+（Chrome 默认替换 Android 浏览器）和 iOS 6.0+ 应该没有问题。
从未听说过 calc，有点像改进的表达式？看起来不错
@JuanMendes calc 很棒，但 IE8 扼杀了依赖它的机会。
@Mooseman 在这种情况下，我可以退回到基于百分比的边距/宽度。

【解决方案2】：

边距将添加到您的容器宽度。如果您使用基于百分比的宽度，您也应该将边距值设置为百分比。

例如，如果您想要两个 50% 的 div。您还需要考虑保证金。为此，您需要从总宽度中减去边距。如果您想要左右 1% 的边距，则总共需要从总宽度中移除 2%。

div {
float: left;
width: 48%;
margin: 0 1%;
}

你更新的小提琴：http://jsfiddle.net/sa53B/8/

【讨论】：

【解决方案3】：

已经很晚了，但有人可能对这种修复方式感兴趣：

使用 div 将您希望显示的元素包装在列中：

<div class="left"><a ....></a></div>
<div class="right"><a ....></a></div>

然后设置这些样式：

.left {
    float:left;
    width:50%;
}

.right {
    float:right;
    width:50%;
}

无论 div 内容的边距如何，它都不会影响 50% 的宽度。在听说有用的 css calc 之前，我曾经这样做过。

见JSFiddle

【讨论】：

这是更好的方法，因为它使两列都保持在 50%，但允许您在内容之间添加所需的任何边距并且不依赖于 calc()。您不必使用 %width 边距。添加到 css 以明确如何获得边距：.left a { margin-right: 5px; }.right a { margin-left: 5px; }

【解决方案4】：

最近在我的任务中，我需要两个浮动列，它们之间有 8px 的固定边距。

所以，我使用了没有任何计算魔法的边框和框大小属性。

所以，解决方案是：

.wrapper__col {
   width: 50%;
   box-sizing: border-box; // used to change box-model
   overfow: hidden; // clearfix hack
}
.wrapper__col:nth-child(odd) {
   float: left;
   border-left: 4px solid transparent;
}

.wrapper__col:nth-child(even) {
   float: right;
   border-right: 4px solid transparent;
}

<div class="wrapper">
   <div class="wrapper__col">1</div>
   <div class="wrapper__col">2</div>
</div>

所以，就是这样；）

【讨论】：

【解决方案5】：

您尝试执行的操作不适用于固定边距。您需要使用百分比边距进行计算。

框大小仅影响填充和边框空间，而不影响边距空间。所以 50% + 50% =100% +5px+5px > 100%。

使用 % 边距，您的问题就解决了。

【讨论】：

谢谢迈克尔，只能勾选一个答案，但给这个+1。

【解决方案6】：

这是我的做法，但它使用了以下变量之间的差距：

css：

.left {
  float:left;
  width:59%;
  margin-right: 1%;
  background-color:red;
}
.right {
  float:left;
  width:39%;
  margin-left: 1%;
  background-color:blue;
}

html：

<div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

jsfiddle： http://jsfiddle.net/gkmjLfgx/

【讨论】：

【解决方案7】：

有时您希望在水平和垂直方向上保持相同的 10 像素间距，并且仍然具有相同大小的列。

您可以通过将“border-left: 10px solid white”添加到每列内的额外 DIV 并添加“margin-left:-10px”到列容器来吃掉左列的边框来做到这一点.

小提琴 128psahu

【讨论】：