在水平行中放置div之間的間距？

我有一個水平行4個div。我想要在div之間放置空格（我使用邊距，我猜？），但是當我這樣做時，div會溢出父容器。在水平行中放置div之間的間距？

隨着零保證金，他們很好地排隊上一行：

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: red;">A</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: orange;">B</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: green;">C</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: blue;">D</div> 
 
</div>

現在，當我介紹5像素的邊距，最後一個按鈕包裝：

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: red;">A</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: orange;">B</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: green;">C</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: blue;">D</div> 
 
</div>

我想這是因爲寬度屬性，當一個百分比，沒有考慮到該元素的總寬度的邊距？什麼是正確的方法來做到這一點？

感謝

來源

2012-11-21 user291701

[CSS股利寬度百分比和填充而不斷裂佈局]（可能重複http://stackoverflow.com/questions/3538875/css-div-width-percentage-and-padding -without-breaking-layout） –

只需使用您的現有div無邊距作爲包裝div。在每一個div中，你都會放置另一個div，它保存內容並且沒有寬度和邊距。 –

一個可能的想法是：

從您的div的風格刪除width: 25%; float:left;
換四個顏色的div在具有style="width: 25%; float:left;"

這種方法的優點是所有四列都享有平等的寬度和之間的差距一個div他們將永遠是5px * 2。

這裏是什麼樣子：

.cellContainer { 
 
    width: 25%; 
 
    float: left; 
 
}

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: red;">A</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: orange;">B</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: green;">C</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: blue;">D</div> 
 
    </div> 
 
</div>

來源

2012-11-21 16:35:17 GolfWolf

好的這個對我特殊的情況來說是最方便的，謝謝。 – user291701

將代碼嵌入到答案中會有用嗎，以防萬一鏈接出現故障？ https://pastebin.com/raw/mkmt2bTs – barlop

@barlop你說得對，我只是在這裏複製了代碼。 – GolfWolf

我會建議把div是有點小，添加一定比例的保證金。

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: red;">A</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: orange;">B</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: green;">C</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: blue;">D</div> 
 
</div>

http://jsfiddle.net/YJT7q/

來源

2012-11-21 16:26:48

這是因爲width提供當%不佔padding/margin秒。您需要將金額減至24%或24.5%。一旦完成，你應該是好的，但是如果你希望這樣做總是正確的，你需要根據屏幕大小提供不同的選項，因爲你有一個硬編碼的邊距，但是相對大小。

來源

2012-11-21 16:27:33 Jared

或者您可以按照Pow-lan的建議切換到100％的百分比。實施將取決於您需要的控制量。 – Jared

可以以百分比設定左邊距li標籤並設置相同的負左邊距父：

ul {margin-left:-5%;} 
 
li {width:20%;margin-left:5%;float:left;}

<ul> 
 
    <li>A 
 
    <li>B 
 
    <li>C 
 
    <li>D 
 
</ul>

http://jsfiddle.net/UZHbS/

來源

2012-11-21 16:28:20 gkond

不少辦法apprach這個問題。

使用box-sizing css3屬性並使用邊框模擬邊距。

http://jsfiddle.net/Z7mFr/1/

div.inside { 
width: 25%; 
float:left; 
border-right: 5px solid grey; 
background-color: blue; 
box-sizing:border-box; 
-moz-box-sizing:border-box; /* Firefox */ 
-webkit-box-sizing:border-box; /* Safari */ 
} 

<div style="width:100%; height: 200px; background-color: grey;"> 
<div class="inside">A</div> 
<div class="inside">B</div> 
<div class="inside">C</div> 
<div class="inside">D</div> 
</div>

減少你的元素寬度的百分比，並添加一些保證金的權利。

http://jsfiddle.net/mJfz3/

.outer { 
width:100%; 
background:#999; 
overflow:auto; 
} 

.inside { 
float:left; 
width:24%; 
margin-right:1%; 
background:#333; 
}

來源

2012-11-21 16:47:42

另一個想法：補償對div的對面你的保證金。

對於您希望實現的間距一側爲例：10px，對於另一側用-10px進行補償。這個對我有用。這可能不適用於所有情況，但取決於您的佈局和其他元素的間距，它可能工作得很好。

來源

2015-06-18 22:51:48 KGemini22

將所有div放入單獨的表格單元格中，並將表格樣式設置爲padding: 5px;。

E.g.

<table style="width: 100%; padding: 5px;"> 
 
<tbody> 
 
<tr> 
 
<td> 
 
<div style="background-color: red;">A</div> 
 
</td> 
 
<td> 
 
<div style="background-color: orange;">B</div> 
 
</td> 
 
<td> 
 
<div style="background-color: green;">C</div> 
 
</td> 
 
<td> 
 
<div style="background-color: blue;">D</div> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>

來源

2015-07-15 14:14:45

在水平行中放置div之間的間距？

回答

相關問題