基本HTML布局_Html_Css - Fatal编程技术网

基本HTML布局

html css

基本HTML布局,html,css,Html,Css,我试图实现一个简单的布局，如下图所示： _________________________ | | header | | | L |_____________| R | | | | | | | | | | | | | | | main | | | | | | | |

我试图实现一个简单的布局，如下图所示：

 _________________________
|     |   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>


布局
* {
边际：0px；
填充：0px；
}
p{
文本对齐：居中；
}
左分区{
浮动：左；
背景色：#777；
宽度：200px；
高度：650px；
}
div#头{
浮动：左；
背景色：#eee；
宽度：940px；
高度：60px；
}
主分区{
浮动：左；
宽度：940px；
}
对{
浮动：对；
背景色：#777；
宽度：200px；
高度：650px；
}
左
标题
主要的
对

但我无法使“右”列与顶部对齐。有人能告诉我要在CSS中修改什么来纠正这个问题吗？

谢谢

将右列移动到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>


对
左
标题
主要的

约翰·康德的回答是正确的。但是为了帮助你形象化这个变化，把你的宽度改成百分比，你就会明白他的意思了


布局
* {
保证金：0；
填充：0；
}
p{
文本对齐：居中；
}
左分区{
背景色：#777777；
浮动：左；
高度：650px；
宽度：15%；
}
div#头{
背景色：#EEEEEE；
浮动：左；
高度：60px；
宽度：70%；
}
主分区{
浮动：左；
宽度：70%；
}
对{
背景色：#777777；
浮动：对；
高度：650px；
宽度：15%；
}
左
对
标题
主要的

要获得正确的、跨浏览器兼容的浮动布局，正确排序元素非常重要。要实现这一点，应始终使浮动元素显示在非浮动元素之前

您还必须对垂直布局进行优先级排序，例如，如果示例中的标题将分布在页面的整个宽度上，那么它将出现在其后的任何浮动元素之前

    <!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>