回答
element {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
使用盒大小,它使填充包括: https://developer.mozilla.org/en-US/docs/CSS/box-sizing
例子:
div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
值得一提的是這不會對IE7工作。
對於IE8,請參見上面的回答這個問題:box-sizing: border-box => for IE8?
w3schools是一個可怕的資源。使用MDN。 – 2013-03-13 10:55:39
@JanDvorak好吧,道歉,但我沒有意識到。用MDN編輯。 很遺憾,看到一個答案純粹取決於鏈接的選擇,而不是內容本身。 – InsomniaBass 2013-03-13 10:58:47
對於瀏覽和閱讀的人來說,我查找了w3schools的信息,並發現:http://w3fools.com - 強烈推薦閱讀它,因爲它解釋了Jan Dvorak的說法。 – InsomniaBass 2013-03-13 11:06:48
每次你添加填充到塊級元素,這個元素的變化寬度。這個問題有很多解決方案。我通常將margin
設置爲第一個子元素,併爲此元素設置width: 100%
。
例如,我們有:
<div id="main">
<div id="child">
This is content with margin
</div>
</div>
這些元素的CSS樣式:
#main {
border: solid 1px red;
float: left;
width: 5em;
}
#child {
border: solid 1px blue;
float: left;
width: 100%;
margin: 0.5em;
}
這是任何瀏覽器
這確實是W3C團隊在設計佈局模型時所考慮的解決方案。事實上,我從來沒有使用過箱子的尺寸。 – 2013-03-13 11:31:04
+1,用於使用基本CSS的直接解決方案。 – lintmouse 2014-11-03 23:01:08
這是一個古老的線程,我知道解決辦法。但上次我有一個完整的黑洞來製作一個沒有設置寬度和填充的DIV,所以它不會炸燬我的3列行和CSS2。所以我把一個DIV放在左邊,右邊放着一個沒有浮動和沒有固定寬度的DIV,但我想填充它。那怎麼樣...
我放棄了。 :D但是我把一個內部的DIV放在中央,並給它寬度= 90%。到目前爲止,這是一個非常簡單但不是很好的解決方案,但有時它有助於實現您所需要的外觀。 ;]
b.r.
- 1. 如何在不添加填充的情況下修改標題?
- 2. 填充添加到div寬度/高度?
- 3. HTML寬度情況下
- 4. 在不改變顏色的情況下更改圖像亮度
- 5. 如何在不影響背景圖像的情況下將填充添加到?
- 6. 如何在不改變ImageView寬度的情況下設置圖像的寬度(在ImageView中)?
- 7. 在不改變其透明度的情況下禁用按鈕
- 8. 如何在不填充角落的情況下填充一個numpy數組?
- 9. 改變的情況下
- 10. 如何在不更改inkscape中的筆觸寬度的情況下更改一條線的寬度?
- 11. 如何在沒有填充內容的情況下將填充添加到重複的CSS背景?
- 12. 在不改變VB代碼的情況下在Excel中添加新列
- 13. 保證金,填充不工作在我的情況下
- 14. 如何在不更改配置的情況下添加地圖?
- 15. 由jQuery設置的填充改變元素的寬度
- 16. 如何在不增加div大小的情況下在HTML中應用填充?
- 17. 可變寬度字符串填充
- 18. 填充UILabel文本填充其寬度
- 19. 在不改變dataProvider的情況下將行添加到Flex DataGrid中
- 20. Jquery(input/textarea).val():它如何在不改變DOM的情況下添加內容?
- 21. 如何在不改變URL欄的情況下添加HTML哈希鏈接...?
- 22. 在不移動文本的情況下增加間距的填充
- 23. textarea的填充remaing寬度
- 24. 如何在不拉伸文本的情況下更改TextField的寬度?
- 25. 如何在不影響QDockWidget的情況下更改QMainWindow分隔符的寬度
- 26. 爲什麼在這種情況下填充不會發生?
- 27. 如何在不知道寬度的情況下對齊div?
- 28. 在不使用SurfaceHolder的情況下獲取屏幕寬度
- 29. 如何在不改變的情況下設置按鈕的X座標:y,寬度,高度
- 30. Javascript - 在不移動周圍元素的情況下更改邊框寬度。
我認爲利潤率增加了預定義的寬度和填充頂部沒有... – Jace 2013-03-13 10:47:18