0

HTML 5 とレイアウトについて学習しようとしています。これを行う最善の方法は、個人の Web サイトを更新することだと考えました。個人の Web サイトを次のようにしようとしています。

-----------------------------------------------------------------------------------
| 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コンテンツがメイン コンテンツ エリア内ではなく、すべての上にあるように機能します。

4

2 に答える 2

0

以下のcssを追加してみてはどうでしょうか

body 
{
    height: 100%;
    background: #fff;;
}
于 2013-06-20T14:33:10.047 に答える
0

フロートの後にクリアしませんでした追加する必要があります

    <div style="clear:both"></div>
</article>  <----- before closing the article
于 2013-06-20T14:43:56.707 に答える