4

私は、次のように厳密に表された単純なレイアウトを実装しようとしています。

 _________________________
|     |   header    |     |
|  L  |_____________|  R  |
|     |             |     |
|     |             |     |
|     |             |     |
|     |    main     |     |
|     |             |     |
|     |             |     |
|     |             |     |
|_____|_____________|_____|

私は自分の目的を達成するためにこのコードを開発しました：

<!DOCTYPE html>
<html>
<head>
    <title>Layout</title>
<style>

    * {
        margin: 0px;
        padding: 0px;
    }
    p {
        text-align: center;
    }
    div#left {
        float: left;    
        background-color: #777;
        width: 200px;
        height: 650px;
    }
    div#header {
        float: left;    
        background-color: #eee;
        width: 940px;
        height: 60px;
    }
    div#main {
        float: left;    
        width: 940px;
    }
    div#right {
        float: right;   
        background-color: #777;
        width: 200px;
        height: 650px;
    }
</style>
</head>

<body>
    <div id="left">
        <p>Left</p>
    </div>

    <div id="header">
        <p>Header</p>
    </div>

    <div id="main">
        <p>Main</p>     
    </div>

    <div id="right">
        <p>Right</p>
    </div>
</body>

しかし、「正しい」列を上部に揃えることができません。誰かがこれを修正するためにCSSで何を変更するかを教えてもらえますか？ありがとう！

4

3 に答える 3

10

右の列をHTMLの上部に移動します。

<body>

    <div id="right">
        <p>Right</p>
    </div>

    <div id="left">
        <p>Left</p>
    </div>

    <div id="header">
        <p>Header</p>
    </div>

    <div id="main">
        <p>Main</p>     
    </div>
</body>
于 2012-05-25T13:43:59.167 に答える
2

ジョンコンデの答えは正しいです。ただし、変更を視覚化するために、幅をパーセンテージに変更すると、彼の意味がわかります。:)

    <!DOCTYPE html>
    <html>
    <head>
       <title>Layout</title>
    <style>

      * {
       margin: 0;
       padding: 0;
      }
      p {
       text-align: center;
      }
      div#left {
       background-color: #777777;
       float: left;
       height: 650px;
       width: 15%;
      }
      div#header {
        background-color: #EEEEEE;
        float: left;
       height: 60px;
       width: 70%;
      }
      div#main {
       float: left;
       width: 70%;
      }
    div#right {
      background-color: #777777;
      float: right;
      height: 650px;
      width: 15%;
    }
    </style>
    </head>

    <body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <p>Right</p>
    </div>
    <div id="header">
        <p>Header</p>
    </div>

    <div id="main">
        <p>Main</p>     
    </div>
    </body>
于 2012-05-25T14:09:24.453 に答える
1

クロスブラウザ互換のフロートレイアウトを正しく実現するには、要素を正しく順序付けることが重要です。これを実現するには、常にフローティング要素を非フローティング要素の前に表示する必要があります。

また、垂直レイアウトにも優先順位を付ける必要があります。たとえば、例のヘッダーがページの全幅に広がる場合、これはそれに続くフロート要素の前になります。

于 2012-05-25T14:11:46.503 に答える