如何用動態大小（百分比）管理邊框，填充，邊距？

我的問題是如何管理一個元素的大小（讓我們說一個div）與百分比。我有一種情況，我讓兩個div並排浮動，並且都佔用了包含它們的div的50％。這兩個div中的每一個都具有1px的邊界，5px的邊距和一些填充。那麼我該如何管理這些靜態尺寸和內容的動態大小（div）。在剛剛提到的情況下，由於邊界，填充和邊距使得尺寸超過（100％），所以它們不會並排浮動。如何用動態大小（百分比）管理邊框，填充，邊距？

有什麼解決方案？在我的情況下，邊距/填充/邊框的尺寸很小，所以我想我可以將尺寸設置得更低一點（比如45％），並希望它適合。但我認爲這種方法很瑣碎，因爲如果我將填充的大小設置得更高，我將不得不通過試驗和錯誤來調整div的大小，直到找到完美的大小。有沒有適當的方法來實現這一目標？

非常感謝。

來源

2012-03-08 maniak

清潔的工作可以用0保證金和0邊框使兩個浮動的div進行，只是寬度爲50％。然後在裏面你可以放一個適合它的容器的div，帶有靜態邊距和填充。

作爲替代選擇，您可以保持一切動態，所以放一些像邊距：1％，你會得到一個很好的行爲，在窗口調整大小！

來源

2012-03-08 16:21:37 kappa

但是我如何管理這個邊界（他們不能採取pourcentage）和表...我的表必須採取100％，如果我指定一個列的大小在pourcentage（我如何管理單元格的邊界）？ – maniak 2012-03-08 16:46:14

從https://developer.mozilla.org/En/CSS/Box-sizing

/* support Firefox, Safari/WebKit, Opera and IE8+ */ 

.example { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:  border-box; 
}

您可以使用盒大小：邊界框，以便在50％，則適用於內+填充+邊界，但遺憾的是沒有設置添加的保證金。

但是，您可以在div中使用div，並在外部div上使用填充來模仿邊距。

這裏是一個例子JSFiddle

來源

2012-03-08 16:15:24 Dampsquid

如何用動態大小（百分比）管理邊框，填充，邊距？

回答

相關問題