像素不会累加答案

【问题标题】：Pixels won't add up像素不会累加
【发布时间】：2012-10-30 02:23:08
【问题描述】：

我的像素计算没有加起来有问题。

我有一个主 div (#page)，即：980px 宽它有一个子 div (#content)，也是：980px 宽

在 div (#content) 内有两个 div (#left-pane)，宽度为 300 像素，(#right-pane) 宽度为 676 像素。

它们都有一个 1px 的边框 - 横向看整个网站，这应该是 4px 的宽度。

因此，

300 像素 + 676 像素 + 4 像素 = 980 像素

尽管如此，我的 div (#right-pane) 向下移动到 div (#left-pane) 下方。为什么？

我将它们的填充和边距都设置为 NONE。

HTML：

<head>
<title>Brazil Learner | The easy was to master Brazilian-Portuguese</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="page">

<div id="top">
<img class="logo" src="images/logo.png" />
<ul class="social">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>

<div id="nav">
<div class="nav-button"><a href="#">Home</a></div>
<div class="nav-button"><a href="#">Lessons</a></div>
<div class="nav-button"><a href="#">Guides</a></div>
<div class="nav-button"><a href="#">About us</a></div>
</div>

<div id="content">

<div id="left-pane">
</div>

<div id="right-pane">
</div>

</div>

<div id="footer">
<div>

</div> <!-- Page closer -->

</body>

</html>

CSS：

html,body,p,ul,li,img,h1,h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

a {
text-decoration: none;
color: black;   
}

#page {
width: 980px;
margin: 0px auto;
}

/* Top */

#top {
border: 1px solid black;
overflow: hidden;
padding: 30px 30px;
}

.logo {
float: left;
width: 130px;
height: 130px;
}

.social {
float: right;
margin-right: 40px;
}

.social li {
display: inline;
margin: 0px 10px 0px 0px;
}

/* Nav */

#nav {
border: 1px solid red;
overflow: hidden;
margin-bottom: 20px;
}

.nav-button {
float: left;
width: 100px;
margin-right: 6px;
background-color: grey;
text-align: center;
}

/* Content */

#content {
margin-bottom: 20px;
overflow: hidden;
width: 980px;
}

#left-pane {
float: left;
width: 300px;
height: 700px;
border: 1px solid green;
}

#right-pane {
float: right;
width: 676px;
height: 700px;
border: 1px solid black;
}

/* Footer */

#footer {
float: left;
width: 980px;
height: 70px;
border: 1px solid blue;
}

【问题讨论】：

所以你的容器是 960 像素宽，你的内容是 980 像素宽，你很惊讶它不适合吗？ :o)
您在哪个浏览器中看到它向下移动？ It works 在 Chrome 22、IE 9 和 FireFox 13 中......

标签： html css

【解决方案1】：

我不确定这是否可行，但添加它并查看它是否可行。

* {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

【讨论】：

非常简单的解决方案。谢谢你。这适用于所有浏览器吗？
是的，它适用于所有浏览器并且非常有用。我现在默认将其添加到我的所有网站。它使盒子模型的行为与您期望的一样。如果您想了解更多信息，我写了一篇关于它的博客文章。 matt-steele.com/blog/box-sizing-border-box

【解决方案2】：

要考虑 div 的宽度，您应该考虑 4 个组件

div 本身的宽度（例如，这是您的文本所在的位置）
填充宽度（围绕上面第 1 点中提到的宽度）
边框的宽度（围绕填充）
边距（围绕边框）

因此，如果您搜索 CSS 盒子模型（一些示例在此处 http://www.w3.org/TR/CSS2/box.html 和此处 http://www.w3schools.com/css/css_boxmodel.asp），您将能够看到可以帮助您的盒子模型。同样使用 jQuery，您可以使用以下方法检索每个部分的宽度：.width()、.innerWidth() 和 .outerWidth()。请注意，您可能需要进行一些计算才能找到边框宽度、填充宽度或边距宽度。

阅读 CSS 文档和 jQuery 文档以更清楚地了解它们的工作原理。如果您需要一些具有可变宽度对象的精确值，有时您可能需要使用 jQuery 为您正确计算宽度。

【讨论】：

嗯，我认为这确实有助于他寻找正确的答案。提问者正在省略填充和边距。所以通过这些，他或许能够找到答案。此外，他还可以使用 jQuery 的三种宽度方法，包括 .outerWidth(true)，来计算他的每个 div 的宽度。
w3schools 是terrible resource，否则我会投赞成票。
这是 w3.og 本身的盒子模型！ w3.org/TR/CSS2/box.html（只为你更新评论）
我认为 OP 清楚地了解盒子模型，并将您概述的 4 个组件中的每一个都考虑在内。
你可能是对的，我并不是说这是答案。这就是我处理问题的方式，这就是为什么你可以在这个网站上获得许多答案：给出不同的观点。无论如何，我的意图，就像你和其他人一样，是为提问者提供最好的帮助。

【解决方案3】：

您使用什么浏览器来测试您的网站？

我把你的代码扔在了小提琴上，它在我的 Firefox 中看起来很好，这表明你可能正在 IE 中查看它，并且可能是在非标准模式或旧版本中。

如果是这样，那是由于 IE（即旧版本）如何处理盒子模型和数学。对于 IE， 300px + 676px + 4px > 980px 。解决这个问题的最简单方法是将影响宽度的东西减少 1-2px，它可能会修复它。

【讨论】：

这是小提琴，因为 Joel & Co. 似乎添加了一个新的....功能。 jsfiddle.net/nFHMk
您需要取消选中 JSFiddle 中的“规范化 CSS”，否则它将首先应用他们的浏览器样式规范化 CSS。
@RoddyoftheFrozenPeas - 取消选中它没有任何效果 - jsfiddle.net/nFHMk/1 （因为它不应该，因为有理由认为它们会与 OP 在他的代码中的重置重叠） .
是的。但为了获得最佳效果，所有小提琴都应该这样做以保持一致性。
有时当问题最终由某些深奥的浏览器样式引起时，您会看到大量的 cmets，类似于“无法在 [browser x] 中重现，请查看此小提琴”小提琴将在哪里进行“标准化”。