浮动两个50％宽度div与10px之间的边距 [英] Floating two 50% width divs with a 10px margin between

问题描述

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

I want to float a pair of fluid divs across my page, each taking up half of their container's width, but with a margin of 10px between them. I've done this JSFiddle http://jsfiddle.net/andfinally/sa53B/5/, and here's the 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;
}

框大小规则不足以使此工作 - 宽度大于50％。在此问题的答案之一有人建议使用CSS显示表。任何人都可以解释如何在这种情况下完成这项工作。

The box-sizing rule isn't enough to make this work - the divs are more than 50% wide. In one of the answers to this question somebody suggested using CSS display-table. Can anyone explain how to make that work in this situation?

谢谢！

推荐答案

您可以a）将 50％降低至 48％，并将保证金 2％或b）使用CSS3 calc ，不支持任何地方，但在不久的将来应该是一个选项。 （具体来说，当IE8离开表格时）（有关兼容性，请参见 http://caniuse.com/#feat=calc ）



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

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

You can either a) lower 50% to 48% and make the margin 2% or b) use CSS3 calc, which is not supported everywhere, but should be an option in the near future. (Specifically, when IE8 is off the table) (See http://caniuse.com/#feat=calc for compatability)

Example using percentages: http://jsfiddle.net/sa53B/9/
Example using calc: http://jsfiddle.net/sa53B/6/

这篇关于浮动两个50％宽度div与10px之间的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！