Question

我想在我的页面上浮动一对流体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;
}

盒子大小规则不足以使这项工作 - div超过50％宽。在this question的一个答案中，有人建议使用CSS display-table。任何人都可以解释如何在这种情况下完成这项工作吗？

谢谢！

Answer 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;
}

Answer 2

保证金将添加到您的容器宽度。如果您使用的是基于百分比的宽度，则还应将百分比值设置为百分比。

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

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

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

Answer 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计算之前我曾经这样做过。

请参阅JSFiddle

Answer 4

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

所以，我使用了border和box-sizing属性而没有任何计算魔法。

所以，决定是：

.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>

所以，这就是全部;）

Answer 5

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

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

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

Answer 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/

Answer 7

有时您需要水平和垂直方向相同的10px间距，并且仍然具有相同大小的列。

你可以通过向每列中的额外DIV添加“border-left：10px solid white”并向列容器中添加“margin-left：-10px”以占用左列的边框来实现此目的

小提琴128psahu

浮动两个50％宽度的div，其间的间距为10px

7 个答案: