浮动两个50%宽度的div,其间的间距为10px

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%宽.在这个问题的答案之一,有人建议使用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/