浮動兩個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 ％寬。在this question的答案之一有人建議使用CSS顯示錶。任何人都可以解釋如何在這種情況下做出這項工作？

謝謝！

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

什麼你正在嘗試做的不固定的利潤率工作。您需要使用百分比邊際進行計算。

框的大小隻影響填充和邊框空間，而不是邊距空間。所以50％+ 50％= 100％+ 5px + 5px> 100％。

使用％邊距並解決您的問題。

Answer 4

現在已經晚了，但有人可能會對此感興趣的方式來解決：

包裹元素，你希望在列與申報單顯示：

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

而只設置這些樣式：

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

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

無論divs內容的邊距如何，它都不會影響50％的寬度。 我以前這種方式進行之前聽到有用的CSS計算。

見JSFiddle

Answer 5

這裏是我如何做到這一點，但它使用間可變間隙：

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 6

有時候你想的一樣10px的水平和垂直間距，仍然有同樣大小的列。

您可以通過在每列內添加一個「border-left：10px solid white」到額外的DIV並向列容器添加「margin-left：-10px」來消除左邊界柱。

小提琴128psahu

Answer 7

最近在我的任務，我需要與他們之間加上了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>

所以，這就是所有的;）