CSS盒子模型寬度問題

我是newbiew到CSS。請首先看看這個簡單的兩列布局。CSS盒子模型寬度問題

http://www.vanseodesign.com/blog/demo/2-col-css.html

我要問爲什麼的側邊欄的內容+寬寬度=/=容器的寬度是多少？

來源

2011-09-24 Bear

你能鏈接到/附加布局嗎？ –

你應該在這裏粘貼你的代碼，如果可能的話，在www.jsfiddle.net上準備一個這個問題的測試用例。另外@ahadley，我們鼓勵用戶在這裏粘貼他們的代碼，而不是在別處鏈接。 –

感謝提高Rikudo。仍然找到我的路！ –

的內容寬度= 610px

在內容填充的寬度= 5 + 5 = 10px的

的含量= 620px

與填充側欄的同樣總寬總寬度= 340px

因此，總容量和邊欄= 620 + 340 = 960px，這等於容器的寬度！

來源

2011-09-24 11:06:14

@bear;檢查此鏈接更多http：//www.w3。組織/ TR/CSS2/box.html – sandeep

沒有看到你的代碼很難給你一個答案。但是一些基本的CSS和HTML低於它會給你一個內容區域的大小爲您的標題一樣，看到它在這裏的行動http://jsfiddle.net/peter/wZQNY/

的CSS

.container{ 
    margin:0 auto; 
    width:960px; 
} 
.header{ 
    width:100%; 
    background:#eee; 
} 
.content{ 
    width:100%; 
    background:#ccc; 
}

的HTML

<div class="container"> 
    <div class="header">header navigation</div> 
    <div class="content">page content</div> 
</div>

來源

2011-09-24 10:15:16 Anagio

W3C規範說明框的寬度是：邊距+邊框+填充+寬度。這樣你就可以確定實際的盒子寬度。

如果總結得到的框寬度，您將得到一個等於容器寬度的結果。

來源

2011-09-24 10:45:38 lucassp

你是不是隻是'等於'？它不會少於。 –

是的，等於，在問題的上下文中。 – lucassp

所以你應該從你的答案中刪除「更少或者」，以便它是正確的。 –

我看不到問題。在你的鏈接中，content.width + sidebar.width == container.width

你的問題是什麼？你使用的是什麼瀏覽器？

一個可能的解決方案是，你可能有一些怪異的行爲因邊界或頁邊距，對於這一點，你應該申請一個CSS Reset。

來源

2011-09-24 10:48:38

CSS盒子模型寬度問題

回答

相關問題