基本HTML佈局

我想實現一個簡單的佈局，緊緊這樣表示：基本HTML佈局

_________________________ 
|  | 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中更改什麼來糾正此問題嗎？謝謝！

來源

2012-05-25 tessiof

將右列到你的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-25 13:43:59

現在好了！謝謝！ – tessiof

約翰·孔德答案是正確的。但爲了幫助您將變化可視化，請將寬度更改爲百分比，然後您會看到他的含義。 :)

<!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-25 14:09:24 Bob

要實現正確的，跨瀏覽器兼容的浮動佈局，正確排列元素非常重要。爲了達到這個目的，你應該總是在浮動元素出現在非浮動元素之前。

您還必須優先考慮垂直佈局，例如，如果您的示例中的標題要在頁面的整個寬度上分佈，則會出現在所有跟隨它的浮動元素之前。

來源

2012-05-25 14:11:46

回答

相關問題