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 回答