文章坐在內容的頂部而不是內容的HTML頁面

我想了解HTML 5和佈局。我想最好的辦法是更新我的個人網站。我試圖讓我的個人網站看起來如下：文章坐在內容的頂部而不是內容的HTML頁面

----------------------------------------------------------------------------------- 
| Welcome    [black background]          | 
----------------------------------------------------------------------------------- 
| Title (with big font) [white background]          | 
| subtitle                  | 
----------------------------------------------------------------------------------- 
| links here   [blue background]           | 
----------------------------------------------------------------------------------- 
| more links here  [light blue background]         | 
----------------------------------------------------------------------------------- 
|                     | 
| Page Title Goes Here [white background]          | 
|                     | 
| ----------------------  --------------------------------------------------- | 
| | [gray background] |  | [gray background]        | | 
| | Some content will |  | INTRODUCTION         | | 
| | go here   |  | A blurb will go here       | | 
| |---------------------  --------------------------------------------------- | 
|                     | 
| [white background should be behind everythign in this area      | 
-----------------------------------------------------------------------------------

在試圖做到這一點，我有以下的HTML 5代碼：

<body> 
    <div style="margin-left:auto; margin-right:auto; width:70%;"> 
    <nav style="background-color:black; line-height:34px; height:34px;"> 
     <div style="vertical-align:middle; padding:0px 12px; color:white;"> 
     Welcome! 
     </div> 
    </nav> 

    <div style="height:130px; width:100%; background-color:#fff; display:table;"> 
     <div style="vertical-align:middle; color:#000; display:table-cell; padding-left:12px;"> 
     <h1>My Site</h1> 
     <h2>Thank you for visiting</h2> 
     </div> 
    </div> 

    <nav style="background-color:#085394; line-height:32px;"> 
     <div style="vertical-align:middle; padding:0px 12px; color:white;"></div>    
    </nav> 

    <nav style="background-color:#597eaa; line-height:32px; padding:0px 12px;"> 
     <div style="vertical-align:middle; color:white;"> 

     </div> 
    </nav> 

    <div style="padding:12px 30px; background-color:#fff;"> 
     <article> 
     <header> 
      <h1>My Page</h1> 
     </header> 

     <div id="leftContent"> 
      Some content will go here 
     </div> 

     <div id="rightContent"> 
      <section> 
      <header>INTRODUCTION</header> 
      A blurb will go here 
      </section> 
     </div> 
     </article> 
    </div> 
    </div> 
</body>

我也有以下相關風格定義：

#leftContent, #rightContent { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding:8px; 
} 
.leftContent { 
    width: 32%; 
    float: left; 
    background-color:lightgray; 
    padding-right:12px; 
} 
.rightContent { 
    width: 67%; 
    float: right; 
    background-color:lightgray; 
}

http://jsfiddle.net/pt5Gv/

一切都近在咫尺。我現在遇到的問題是nav內容下方的白色區域不會超出article標籤中的內容。我需要做些什麼來使白色內容繼續。目前，它的行爲與article差不多，而不是在主要內容區域內。

來源

2013-06-20 user70192

你有一個小提琴花車後？你清楚了嗎？ – Jon

首先，你有.rightcontent和.leftcontent選擇類，而不是id。將.rightcontent更改爲#rightcontent並將.left內容更改爲#leftcontent。 – jackweinbender

如何添加以下的CSS

body 
{ 
    height: 100%; 
    background: #fff;; 
}

來源

2013-06-20 14:33:10 Danield

你沒有明確您需要添加

<div style="clear:both"></div> 
</article> <----- before closing the article

來源

2013-06-20 14:43:56 kcsoft

文章坐在內容的頂部而不是內容的HTML頁面

回答

相關問題