Wil*_*ell 3 css padding fluid-layout
这个简单的HTML5布局旨在左侧有一个导航栏,主体文本与它一起浮动(使用百分比而不是像素表示流畅的响应式设计 - 计算在CSS中的注释中.)
http://www.wturrell.co.uk/stackoverflow/20110615-01.html
'page'div中元素的宽度总计达到100%.我想为某些元素添加填充,在本例中为nav.如果我删除所有填充,它们正确浮动,但超过1或2个像素的填充(无论它指定的单位),它会中断.我不明白为什么这会破坏布局,因为它的填充因此肯定不会改变块的整体大小？
我错过了什么？
更新 - 解决方案: http ://www.wturrell.co.uk/stackoverflow/20110615-02.html
(元素显示宽度=宽度加边框加填充.导航应为标称200像素,右侧为20px填充,因此对于流体设计,宽度= 180/900*100或20%,填充= 20/900*100或2.222 %和正文仍为700/900*100或77.777%.)
首先,您需要添加doctype以触发标准模式.如果没有这个,您的页面将使用Quirks模式,这将导致特别是Internet Explorer中的恶魔般的问题.
添加为您的第一行:
<!DOCTYPE html>
接下来,@ Alex Ciminian的回答是关于盒子模型的正确答案(padding不被认为是其中的一部分width).您可以减少width确切的数量padding,或者:
使用box-sizing: border-box:https://developer.mozilla.org/en/CSS/box-sizing
您可以将它添加到您希望padding包含在计算中的任何元素width:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
有关详细信息,请参阅:http://css-tricks.com/box-sizing/
浏览器对这个属性的支持很好:http://caniuse.com/css3-boxsizing - 除了IE6/7之外的任何地方.