三列，寬度爲33％，邊距/填充。爲什麼最後一列破了？

，所以我嘗試下面的代碼

<div id="mainContent" style="height: 350px"> 
       <div class="grid4"> 

       </div> 
       <div class="grid4"> 

       </div> 
       <div class="grid4"> 

       </div> 

      </div>

和Grid4 CSS下面

.grid4 
{ 
    Width: 33%; 
    float:left; 
}

和主要內容寬度100%.

現在我想給padding or margin in percentage任何的grid4它正在推下一個Div。

我應該使用什麼屬性來給內部填充寬度？

由於

來源

2013-03-28 user2067567

您有三個33％寬度的網格，總計99％。如果你添加1％的填充，你將有102％（或更多）的新總數。所以div會包裝。 – 2013-03-28 04:13:32

如果填充或邊緣被施加到.grid4列，則它們的尺寸將被添加到該列的寬度：33％+ 33％+ 33％+（無論組合的填充和利潤是）=？（最有可能大於100％的東西）。這就是列破壞的原因。

如果將填充或邊距應用於每列的子元素，則大小將不會添加到列的寬度。 33％+ 33％+ 33％= 99％。

如果您確實需要將填充或邊距應用於列，則必須將寬度減小到與填充或邊距組合時加起來不超過100％的量。

來源

2013-03-28 04:13:35

因此，在Grid4內部的div和我做的事情。對吧？ – user2067567 2013-03-28 04:15:35

@ user2067567：這應該不會破壞列，是的。這是最簡單的方法。這樣，您可以完全與寬度分開處理邊距和填充，不存在邊距和填充會導致列中斷的風險。 – 2013-03-28 04:17:14

在標準的CSS盒模型填充增加了它的價值，容器的寬度。（寬度+填充+邊框=實際可見/渲染箱的寬度）

所以你grid4寬度= 33％+填充。這就是爲什麼它推倒了。

您可以使用CSS Box Sizing - 它允許您將填充添加到容器中，並仍然使其實際寬度與您指定的值保持不變。

#mainContent{ 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box;  
}

然後，它應該工作，你想它的工作。

否則，您需要計算每個grid4的填充和寬度，總計爲33％。

來源

2013-03-28 04:18:07 dkatwitt

邊距仍將佔用列寬之外的空間。但這至少可以防止填充破壞列。 – 2013-03-28 04:21:58

當然，您需要將邊距設置爲0或包含在列的空間計算中。 – dkatwitt 2013-03-28 04:31:56

三列，寬度爲33％，邊距/填充。爲什麼最後一列破了？

回答

相關問題