Question

我正在尝试了解HTML 5和布局。我认为最好的方法是更新我的个人网站。我正在尝试使我的个人网站如下所示：

-----------------------------------------------------------------------------------
| 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内容位于所有内容之上，而不是在主要内容区域内。

Answer 1

如何添加以下css

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

Answer 2

浮子之后你没有清楚你需要添加

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

文章位于内容之上，而不是html页面中的内容

2 个答案: