像素不会加起来

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

我有一个主要的div（#page）即：980px宽它有一个孩子的div（#content），这也是：980px宽

股利（#content）有两个div（#left-pane）内，这是300px宽和（＃右窗格），这是676像素宽。

他们两个都有一个1px的边框 - 从水平方向看整个网站，这应该给4px的宽度。

因此，

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

尽管此，我的div（#right-pane）在div（#left-pane）下面向下移动。为什么？

我有两个填充和边距设置为无。

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; 
}

来源

2012-11-09 nodesto

所以你的容器是** 960 **像素宽，你的内容是** 980 **像素宽，你很惊讶它不适合？：o） –

您在哪个浏览器中看到它向下移动？ [它的作品]（http://jsfiddle.net/Wq2sz/）在Chrome 22，IE 9，和FireFox 13 .... –

我不知道这是否会工作或没有，但增加这一点，看看它是否工作。

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

来源

2012-11-09 18:13:35

非常简单的解决方案。谢谢。这是否适用于所有浏览器？ – nodesto

是的，它适用于所有浏览器，并且非常有用。我现在默认添加到我的所有网站。它使盒子模型的行为像你期望的那样。如果你想了解更多，我写了一篇关于它的博客文章。 http://matt-steele.com/blog/box-sizing-border-box –

要考虑一个div的宽度，有4个comoponents你应该想想

在div本身的宽度（这是你的文本将是例如）
的填充宽度（围绕上面第1点提到的宽度）
边框的宽度（围绕填充）
边距（围绕边框）

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

阅读CSS文档和jQuery文档，以更清楚地了解这些工作。有时候，如果你需要一些精确的值和可变宽度的对象，你可能需要利用jQuery来正确地进行宽度计算。

来源

2012-11-09 18:16:59 Greeso

嗯，我认为这确实帮助他寻找正确答案。提问者正在省略填充和保证金。所以通过看这些，他可能会找到答案。此外，他可以使用三种jQuery宽度方法（包括.outerWidth（true））来计算每个div的宽度。 – Greeso

w3schools是[可怕的资源]（http://www.w3fools.com），否则我会upvote这一点。 –

这里是w3.og本身的盒子模型！ http://www.w3.org/TR/CSS2/box.html（更新评论仅供您参考） – Greeso

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

我在一个小提琴上抛出了你的代码，它在我的Firefox中显得很好，这表明你可能在IE中查看它，并且可能在非标准模式或旧版本中查看它。

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

来源

2012-11-09 18:26:33 Shauna

这里是小提琴，因为Joel＆Co.似乎已经添加了一个新的....功能。 http://jsfiddle.net/nFHMk/ – Shauna

您需要取消选中JSFiddle中的“正常化CSS”，否则它将首先应用浏览器样式标准化CSS。 –

@RoddyoftheFrozenPeas - 取消选中它没有任何作用 - http://jsfiddle.net/nFHMk/1/（因为它不应该，因为它会站在理由，他们会重置与OP在他的重置码）。 – Shauna

像素不会加起来

回答

相关问题