Question

到目前为止我的HTML

<!DOCTYPE html> 
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<style type="text/css" title="currentStyle" media="all">@import url(css/general.css);
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="line"></div>
<div id="navigation">
    <ul>
        <li><a href="#">TV Shows</a></li>
            <ul>
                <li><a href="#">The Walking Dead</a></li>
                <li><a href="#">Grimm</a></li>
            </ul>
        <li><a href="#">Movies</a>
            <ul>
                <li><a href="#">Action</a>
                <li><a href="#">Comedy</a></li>
                <li><a href="#">Thriller</a></li>
            </ul>
        </ul>
    </div>
<div id="content">
    <p>some text blablablaba</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>

我的CSS

#container
{
border: 1px solid black;
width:95%;
height: 800px;
margin: 0 auto;
}
#line
{
border: 1px solid black;
position: relative;
top: 100px;
}

#header
{
background: url(../header.jpg) no-repeat;
width:150px;
height:150px;
float: left;
position: relative;
top: 50px;
left: 100px;
border: 1px solid black;
z-index: 30;

}

#navigation 
{
position: relative;
float:left;
top: 270px;
width: auto;
height: auto;
border: 1px solid black;
}

#content
{
float:right;
top: 270px;
width: auto;
height: auto;
border: 1px solid black;
}

我的问题：为什么我的内容框如果我向左或向左漂浮在我的页面顶部？我在浮动上读到的内容应该是填满导航旁边的空间。（因为我的行div在页面上传播。）我希望将我的内容放在导航旁边的相同位置。

（ps。没有样式但是平面布局atm）

编辑：编辑了我的错误类=＆＃34;内容＆＃34;到id =＆＃34;内容＆＃34;问题仍然存在

Answer 1

你用过

#content
{
    ...
}

for class='content'！？

你应该使用.content

并为position: relative;

设置.content

jsfiddle

CSS Float属性

1 个答案: