我的像素计算不添加。
我有一个主div（#page），即：980px宽它有一个儿童div（#content），也有：980px wide
在Div（#content）内部有两个Divs（#left-pane），它是300px宽的，（＃右窗格），宽676 px。
他们俩一直都有一个1px边框 - 水平遍布站点，这应该给出4px的宽度。
因此，
300px 676px 4px = 980px
尽管如此，我的DIV（#right-pane）还是向下移动（#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;
}
我不确定这是否有效，但请添加它并查看它是否有效。
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
您使用什么浏览器来测试您的网站？
我将您的代码扔在小提琴上，这在我的Firefox中看起来还不错，这表明您可能在IE中查看它，可能是在非标准模式或旧版本中。<<<<<<<<<<<<
如果是这样，则是由于IE（即旧版本）如何处理框模型和数学。到IE，300px 676px 4px> 980px。解决此问题的最简单方法是将影响宽度影响宽度的东西减少1-2PX，并且可能会修复它。
要考虑一个div的宽度，您应该考虑4个comoponents
- DIV本身的宽度（例如，这是您的文本的位置）
- 填充宽度（上面点1中提到的宽度周围）
- 边界的宽度（周围填充）
- 边界的边缘（周围）
因此，如果您搜索CSS框模型（一些示例在这里http://www.org/tr/css2/box.html，此处http://wwwwwwwwwwwwwwwwwwww.w3schools.com/css/css/csss_boxmodel。ASP），您将能够看到可以帮助您的框模型。另外，使用jQuery可以使用以下方法检索每个部分的宽度：.width（），.innerwidth（）和.outerwidth（）。请注意，您可能需要进行一些计算以查找边框宽度，填充宽度或边距宽度。
阅读CSS文档和jQuery文档，以更清楚地了解它们的工作原理。有时，如果您需要一些具有可变宽度对象的确切值，则可能需要使用jQuery正确计算宽度。