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帮助（非常基本）

回答

相关问题