css divs有不同的寬度，當他們不應該

我有一個div容器包含2個div：橫幅和內容。橫幅和內容的CSS屬性寬度都設置爲100％，但渲染時不同。css divs有不同的寬度，當他們不應該

這是我的index.html

<!doctype html> 
<html lang="en"> 
    <meta charset="UTF-8"> 
    <link href="style.css" rel="stylesheet"/> 
    <title>JoeY34kaze's gw2 stuff</title> 
<body> 
    <div id="container"> 
     <header> 
      <h1> 
       This is my header. 
      </h1> 
     </header> 
     <div id="banner"> 
      <h2> 
       This is the banner. 
      </h2> 
     </div> 
     <div id="content"> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
      <p>Content goes here.</p> 
     </div> 
    </div> 

</body> 
</html>

這是我的style.css

body { 
    text-align:center; 
} 


header { 
    width:100%; 
    height:100px; 
    background: #dbdbdb; 
    z-index:10; 
    position: fixed; 
} 

#container { 
    overflow:hidden; 
    min-width:100%; 
    padding:0; 
} 

#banner { 
    width:100%; 
    height: 500px; 
    padding:0; 
    position: fixed; 
    top: 100px; 
    background-color:#707070; 
} 

#content { 
    height:100%; 
    width:100%; 
    position: relative; 
    top:400px; 
    background-color: #ebebeb; 
}

和網頁看起來是這樣的：

website

，直到我解決這個問題頁面也在這裏住https://gw2stuff.herokuapp.com/

的問題是，在右側的2周的div沒有對齊，但他們應該。我認爲問題來自內容div的相對位置，但我無法修復它，所以我的問題是我如何對齊2個div，使它們的寬度匹配？

來源

2016-03-03 Joze Jerse

在body

body { 
margin:0; 
}

的#content刪除默認margin股利受到該保證金的影響，但固定頭寸元素雖然他們是放置相對於該保證金，因爲你還沒有爲他們說明一個left:0的位置。

這應該被自動包含在任何CSS復位。

來源

2016-03-03 16:24:49

這是你的解決方案，Paulie打敗了我:-) – Michiel

-1

添加margin: 0到內容，如果這不起作用，移動內容一點點，也許left: 5px將工作

來源

2016-03-03 16:23:58 aln447

我想，當我解決我自己並沒有奏效。添加頁邊距：0到body是解決方案。 –

-1

的content改變位置：

position: fixed;

來源

2016-03-03 16:27:39

雖然這將解決問題，我不希望內容被修復。 –

css divs有不同的寬度，當他們不應該

回答

相關問題