3

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

4 回答 4

7

首先,您需要添加一个文档类型来触发标准模式。如果没有这个,您的页面将使用Quirks Mode ,这将在特别是 Internet Explorer 中导致严重的问题。

添加为您的第一行:

<!DOCTYPE html>

接下来,@Alex Ciminian 对盒子模型的回答是正确的(padding不被认为是其中的一部分width)。您可以减少 的width数量padding,或者:

使用box-sizing: border-boxhttps ://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 之外的所有地方。

于 2011-06-15T12:30:40.267 回答
6

CSS 盒子模型中,padding被添加到width以获得盒子的整体大小。在您的情况下,如果宽度百分比加起来为 100%,即使 1px 也意味着内容溢出。

尝试以百分比设置填充,并在添加它们时将其考虑在内,或者在边缘保留 1% 或 2% 的缓冲区,并以像素为单位添加小填充。

于 2011-06-15T12:14:30.667 回答
3

@williant; 亚历克斯是正确的padding & border添加width到一个元素。因此,width根据padding.

CSS:

#page nav {
    clear: both;
    display: inline;
    float: left;
    padding: 0 10% 0 0;
    width: 12.2222%;
}
于 2011-06-15T12:24:47.940 回答
1

您可以尝试使用box-sizing: border-box;或设置max-width:100%和/或max-height:100%;

如果您想尝试保持兼容性,则 max-width 和 max-height css 选项与旧版本的 IE 兼容。

编辑:

使用下面的代码在浏览器中使用 box-sizing:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
于 2013-01-13T00:23:38.620 回答