18

我想在我的页面上浮动一对流体 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%。在这个问题的一个答案中，有人建议使用 CSS display-table。谁能解释如何在这种情况下进行这项工作？

谢谢！

4

7 回答 7

33

您可以 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%
}

使用示例：http calc: //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;
}
于 2013-03-01T18:21:56.743 回答
7

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

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

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

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

于 2013-03-01T18:22:32.113 回答
2

为时已晚，但有人可能对这种修复方式感兴趣：

用 divs 将要显示的元素包装在列中：

<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

于 2014-09-04T20:21:08.960 回答
2

最近在我的任务中，我需要两个浮动列，它们之间有 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>

所以，就是这样；）

于 2017-10-24T13:22:38.273 回答
1

您尝试做的事情不适用于固定边距。您需要使用百分比边距进行计算。

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

使用 % margins，你的问题就解决了。

于 2013-03-01T18:26:54.077 回答
0

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

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/

于 2015-03-11T05:00:53.743 回答
0

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

您可以通过在每列内的额外 DIV 中添加“border-left：10px 纯白色”并在列容器中添加“margin-left：-10px”来吃掉左列的边框来做到这一点。

小提琴 128psahu

于 2015-07-07T09:15:21.157 回答