Question

CSS基础问题

#header
{
margin:5px auto;
width:100%;
height:80px;
}
#contentleft
{
width:180px;
height:450px;
float:left;
}
#contentcenter
{
width:410px;
height:450px;
float:left;
margin-left:6px;
}
#contentright
{
width:170px;
height:450px;
float:right;
margin-left:6px;
}
#bottom{

height:80px;
width:100%;
background:gray;

}
</style>
</head>
这是我初学CSS自己写的代码 打算让它成为一个简单的框架 可是 底部为什么一直在上面 ？其他的位置都对 ，是什么问题造成的呢？该怎么设置？

Answer 1

css布局有问题，因为div独占一行，根据你的设计图设计的时候应该分为左右两部分div当容器
代码如下，我加了高度，具体你可以适量改下

<div style="height: 60px;width: 960px;margin: 0px auto;border: 1px solid #cf3">
<div style="width: 50%; float:left">
<div style="height:200px">热点新闻</div>
<div style="height:200px">最近新闻</div>
</div>
<div style="width: 50%; float:left">
<div style="height:320px">nr</div>
<div style="height:50px">ss</div>
<div style="height:30px">ss</div>
</div>
</div>
这样可以么？

Answer 2

css布局有问题，因为div独占一行，根据你的设计图设计的时候应该分为左右两部分div当容器
代码如下，我加了高度，具体你可以适量改下

<div style="height: 60px;width: 960px;margin: 0px auto;border: 1px solid #cf3">
<div style="width: 50%; float:left">
<div style="height:200px">热点新闻</div>
<div style="height:200px">最近新闻</div>
</div>
<div style="width: 50%; float:left">
<div style="height:320px">nr</div>
<div style="height:50px">ss</div>
<div style="height:30px">ss</div>
</div>
</div>