像素不會加起來

我的像素計算沒有加起來有問題。像素不會加起來

我有一個主要的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

像素不會加起來

回答

相關問題