HTML Wrapper Div標記不起作用？

我知道這個問題已經在這個論壇上被問到過，但沒有一個答案有幫助，所以我在這裏再次提問，我的html5和css網站有一個包裝（與大多數人一樣），但是它的內容沒有調整大小，我已經檢查了我認爲可能出錯的所有內容，以下是所有想要查看內容的代碼，謝謝！HTML Wrapper Div標記不起作用？

HTML

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Home</title> 
     <link rel="stylesheet" href="style.css"> 
    </head> 

    <body> 
     <div id="wrapper"> 


      <div id="header"> 
       <ul> 
        <a href="index.html"><li>Home</li></a> 
        <li>&nbsp;|&nbsp;</li> 
        <a href="blog.html"><li>Blog</li></a> 
        <li>&nbsp;|&nbsp;</li> 
        <a href="videos.html"><li>Videos</li></a> 
        <li>&nbsp;|&nbsp;</li> 
        <a href="#"><li>Contact-Me</li></a>    
       </ul> 

       <h1>Zormion's Blog</h1> 
      </div> 


      <div id="content"> 
       <h2>Latest Blog Post:</h2> 
      </div> 


      <div id="sidebar"> 
       <h3>Tweets:</h3> 
        <a class="twitter-timeline" href="https://twitter.com/Zormion" data-widget-id="537398875540455424">Tweets by @Zormion</a> 
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
      </div> 


     </div> 
    </body> 
</html>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: #DFC1B0 
} 

#wrapper { 
    margin: 20px auto; 
    width: 1000px; 
    text-align: left; 
    background-color: #CCCCCC; 
} 

#header { 
    width: 100%; 
    height: 40px; 
    background-color: #000; 
} 

#header h1 { 
    margin-left: 10px; 
    color: white; 
} 

#header ul { 
    padding-top: 10px; 
    float: right; 
    margin-right: 20px; 
} 

#header ul li { 
    display: inline-block; 
    list-style: none; 
    color: #fff; 
    font-size: 16px; 
} 

#content { 
    width: 63%; 
    height: 150px; 
    background-color: grey; 
    float: left; 
    margin: 10px; 
    padding: 20px; 
} 

#content h2 { 
    text-align: center; 
    font-size: 32px; 
} 

#sidebar { 
    width: 25%; 
    float: left; 
    background-color: grey; 
    margin: 10px; 
    padding: 20px; 
    border: 1px black; 
} 

#sidebar h3 { 
    text-align: center; 
    color: black; 
    font-size: 32px; 
    margin-bottom: 10px; 
    margin-top: -10px; 

} 

.twitter-timeline { 
    height: 500px; 
}

來源

2014-12-02 Genthorn

您可以發佈的jsfiddle，所以我們可以看到它失敗/工作？ – vernak2539 2014-12-02 17:04:13

你有一個爲包裝設置的靜態寬度，它爲什麼會調整大小？ – APAD1 2014-12-02 17:04:53

爲什麼不使用：寬度：100％; ？ – Alin 2014-12-02 19:36:48

使用這樣的：

#wrapper { 
    margin: 20px auto; 
    width: 100%; 
    max-width: 1000px; 
    text-align: left; 
    background-color: #CCCCCC; 
}

來源

2014-12-02 17:05:54

HTML Wrapper Div標記不起作用？

回答

相關問題