解决响应式设计中的CSS填充问题
||
这种简单的HTML5布局旨在在左侧具有一个导航栏,并在其旁边浮动正文(使用百分比而不是像素进行流畅的响应式设计-计算在CSS内的注释中)。
http://www.wturrell.co.uk/stackoverflow/20110615-01.html
\'page \'div中元素的宽度精确地相加为100%。我想向某些元素(在本例中为导航)添加填充。如果我删除所有填充,它们将正确浮动,但是填充超过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%。)
没有找到相关结果
已邀请:
4 个回复
薄扩络拜
邦绊门蔽惩
接下来,关于盒子模型,@ Alex Ciminian的答案是正确的(
不被视为
的一部分)。您可以将ѭ1减少恰好等于ѭ0的量,或者: 使用
:https://developer.mozilla.org/en/CSS/box-sizing 您可以将其添加到想要将ѭ0包含在
的计算中的所有元素中:
有关此的更多详细信息,请参见:http://css-tricks.com/box-sizing/ 浏览器对此属性的支持很好:http://caniuse.com/css3-boxsizing-除了IE6 / 7之外的任何地方。
弓萍功
。因此,根据
调整adjust1ѭ。 CSS:
柑恫祟
或设置
和/或
。 如果要尝试保持兼容性,则max-width和max-height css选项与IE的较早版本兼容。 编辑: 使用以下代码在各种浏览器中使用大小调整框: