問題創建浮動左寬具有相同寬度的div盒

我試圖創建4個盒子左側寬度爲25％，margin:0 10px在側面給予間隔，但最後一個div被壓下。問題創建浮動左寬具有相同寬度的div盒

我試過應用盒子大小，但它沒有做任何事情。

<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 
<div class="box">4</div> 

.box { 
    width: 25%; 
    background: #333; 
    float: left; 
    color: #fff; 
    margin: 0 10px; 
    padding: 10px; 
}

來源

2016-07-25 nCore

的div大小爲25％ - 但它是加保證金左/右10px，所以它們不是均勻間隔。 – Toby

使用'box-sizing：border-box'嘗試'width：calc（25％ - 20px）' – Pete

您的案例中的總寬度爲100％+ 40px> 100％。這就是爲什麼最後一個div被推倒了。 – semanser

按我的意見：

嘗試width: calc(25% - 20px)與box-sizing: border-box

.box { 
 
    width: calc(25% - 20px); /* takes care of margin */ 
 
    background: #333; 
 
    float: left; 
 
    color: #fff; 
 
    margin: 0 10px; 
 
    box-sizing: border-box; /* takes care of padding */ 
 
    padding: 10px; 
 
}

<div class="box">1</div> 
 
<div class="box">2</div> 
 
<div class="box">3</div> 
 
<div class="box">4</div>

如果你不能得到的鈣工作，你可以只取出保證金和使用一個內盒（我通常做什麼，使之兼容的老版本瀏覽器）：

.box { 
 
    width: 25%; 
 
    box-sizing: border-box; 
 
    padding: 0 10px; 
 
    float: left; 
 
} 
 
.box .inner { 
 
    background: #333; 
 
    color: #fff; 
 
    padding: 10px; 
 
}

<div class="box"><div class="inner">1</div></div> 
 
<div class="box"><div class="inner">2</div></div> 
 
<div class="box"><div class="inner">3</div></div> 
 
<div class="box"><div class="inner">4</div></div>

來源

2016-07-25 13:44:58 Pete

怪異的calc正在讀取px作爲％它給我總共5％的寬度。 – nCore

hahaha，很奇怪你使用的是什麼瀏覽器 - 這是一個新的CSS的事情，只支持在較新的瀏覽器 – Pete

我知道的權利，我以前使用過鈣，但從來沒有嘗試過％減px。我現在正在使用chrome，很確定chrome使用calc只是這個很奇怪。 – nCore

就像@toby說你要減少你的寬度的百分比。隨着填充你結束了超過100％。該最小的我能得到它的工作是18％

.box { 
 
    width: 18%; 
 
    background: #333; 
 
    float: left; 
 
    color: #fff; 
 
    margin: 0 10px; 
 
    padding: 10px; 
 
}

<div class="box">1</div> 
 
<div class="box">2</div> 
 
<div class="box">3</div> 
 
<div class="box">4</div>

來源

2016-07-25 13:45:19

我不想減小盒子的寬度，因爲這會使它對我的需要太小。 – nCore

你需要減少一些東西。填充爲10px，寬度爲25％時，數字不加起來。 –

問題創建浮動左寬具有相同寬度的div盒

回答

相關問題