HTML＆CSS Floats幫助（非常基本）

我一直在做codeacademy的HTML/CSS課程，並且直到最後我不得不'構建簡歷'。我在練習開始時將代碼與示例進行了比較，但我無法理解爲什麼我的.right類坐在最右邊，而沒有正確排隊。此外，頁眉和頁腳的寬度相同（95％），但頁腳明顯更小，並且不會像頁眉一樣在屏幕上延伸。HTML＆CSS Floats幫助（非常基本）

任何想法的？

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css"/> 
    <title></title> 
</head> 
<body> 
    <div id="header"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div id="footer"></div> 
</body> 
</html> 

div { 
    border-radius: 5px; 
} 

#header { 
    width: 95%; 
    height: 50px; 
    background-color: lightblue; 
    position: fixed; 
    z-index: 1; 
} 

.left { 
    position: relative; 
    background-color: lightgreen; 
    height: 400px; 
    width: 20%; 
    float: left; 
    margin-top: 60px; 
} 

.right { 
    position: relative; 
    background-color: lightgray; 
    height: 400px; 
    width: 74%; 
    float: right; 
    margin-top: 60px; 
    margin-bottom: 10px; 
} 

#footer { 
    position: relative; 
    background-color: gray; 
    width: 95%; 
    height: 60px; 
    clear: both; 
}

來源

2014-02-22 Marcus

您.right正坐在由於最右邊的float: right;，告訴DIV浮動到右邊，直到它擊中的東西（屏幕/瀏覽器邊緣或內部的div）。如果您希望它與您的左div緊密連接，請嘗試float: left;，這將使該div與您現有的.left div浮動。

來源

2014-02-22 22:53:02 Leo

我試過了，它的效果很好，我只需要在.right上添加一點餘量就可以了，所以它排列得很好。謝謝 – Marcus

至於頁眉和頁腳去，當我試圖設置相同的寬度，它對我工作得很好。唯一我注意到的是一個不同大小的光學錯覺，因爲頭部與內容位重疊，而頁腳保持清晰。 – Leo

HTML＆CSS Floats幫助（非常基本）

回答

相關問題