这个简单的 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%。)