從盒子大小中刪除填充會將寬度添加到div

我在使用15px填充權限的網格中使用盒子大小的內容框。當我向最後一個div應用填充0時，最後一個div的寬度增加了15px，並且該行中的其他div也失去了15px的平等份額。從盒子大小中刪除填充會將寬度添加到div

有沒有辦法解決這個問題？

<div> 
    <div class="col one_quarter"> 
     <h5>One Quarter</h5> 
    </div> 
    <div class="col one_quarter"> 
     <h5>One Quarter</h5> 
    </div> 
    <div class="col one_quarter"> 
     <h5>One Quarter</h5> 
    </div> 
    <div class="col one_quarter last"> 
    <h5>One Quarter</h5> 
    </div> 
</div> 

.col { 
    width: 100%; 
    float: left; 

    border-right: 15px solid transparent; 

    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

.one_quarter { 
    width: 25%; 
} 

.col.last{ 
border-right-width: 0; 
}

來源

2013-11-14 user2962751

當你使你的網格，你必須考慮填充或你得到一些愚蠢的結果。

還有類需要重新分配。（.COL和.one_quarter在同一個元素，因此你100％的寬度和25％的寬度互相覆蓋。）

Here's an Example Fiddle of what I did.

考慮到這一點，我已經更新了你的HTML和CSS：

HTML：

<div class="col"> 
    <div class="one_quarter marginRight"> 
     <h5>One Quarter</h5> 
    </div> 
    <div class="one_quarter marginCenter"> 
     <h5>One Quarter</h5> 
    </div> 
    <div class="one_quarter marginCenter"> 
     <h5>One Quarter</h5> 
    </div> 
    <div class="one_quarter marginLeft"> 
    <h5>One Quarter</h5> 
    </div> 
</div>

CSS：

.col { 
    width: 100%; 
} 

.one_quarter { 
    width: 23%; 
    float: left; 
    border:1px dotted red; 
    float: left; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

.col.last{ 
border-right-width: 0; 
} 

.marginCenter{margin-right:1%;margin-left:1%;} 
.marginLeft{margin-left:2%;} 
.marginRight{margin-right:2%;}

來源

2013-11-14 15:57:51

這是一個更大的網格的一部分，因此.col類用於其他列。我也應該說我正在創建一個固定排水溝的流體網格，你會建議與px一起工作嗎？ – user2962751

只要您的百分比+像素不超過您使用的任何容器的寬度的100％，它就可以使用像素。如果您調整此小提琴寬度大小，您可以看到問題。 http://jsfiddle.net/MathiasaurusRex/aTbGL/2/ –

嗯，唯一的解決方案，我能想到的是填充左側和右側，然後增加容器寬度，但然後我將無法嵌套網格。 – user2962751

我強烈建議不要將填充您的網格元素。這可能會導致嚴重的頭痛。

添加另一個DIV並應用填充網格單元格內是這樣的：

<div class="grid"> 
    <div class="grid-cell"> 
     <div class="grid-content"> 
     </div> 
    </div> 
</div> 

.grid-content { 
padding: 15px; 
}

讓網格單元做寬度測量，和電網的內容做了填充。

來源

2013-11-14 16:05:38 jbenjohnson

目前爲止我還沒有任何內容問題，但我會牢記這一點。 – user2962751

從盒子大小中刪除填充會將寬度添加到div

回答

相關問題