CSS嵌套层问题，定义了float：left可是没有相邻
<html><head><title>无标题文档</title></head><body><divstyle="width:900pxheigh:800px;backgr...
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<div style="width:900px heigh:800px; background-color:#0CF" id="whole">
<div id="head" style="width:500px heigh:100px; background-color:#9CF">
<div id="top_left" style="width:250px; height:100px; border:1px solid #F00; float:left">top_left</div>
<div id="top_right" style="width:250px; height:100px; border:1px solid #F00; float:left">top_right</div>
</div><!--head-->
<div id="center" style="width:500px;heigh:400px;">
<div id="center_left" style="width:150px heigh:400px; float:left;background-color:#3CC">
<div id="center_left1" style="width:150px; height:100px; border:1px solid #F00; ">center_left1</div>
<div id="center_left2" style="width:150px; height:300px; border:1px solid #F00; ">center_left2</div>
</div><!--center_left-->
<div id="center_right" style="width:350px; height:400px; float:left; background-color:#F9C" >
<div id="center_right1" style="width:350px; height:100px; border:1px solid #F00; ">center_right1</div>
<div id="center_right2" style="width:350px; height:200px; border:1px solid #F00; ">center_right2</div>
<div id="center_right_top" style="width:350px; height:100px; border:1px solid #F00;">
<div id="center_right_top1" style="width:350px; height:50px; border-bottom:1px solid #F00">center_right_top1</div>
<div id="center_right_top2" style="width:350px; height:50px; ">center_right_top2</div>
</div><!--center_right_top-->
</div><!--center_right-->
</div><!--center-->
</div><!--whole-->
</body>
</html>
代码如上。就是center层的左右两个层不能相邻，是层的宽度和高度的问题吗,
还有一个问题是为什么center_right_top2层下面有一部分空白，。 展开
<head>
<title>无标题文档</title>
</head>
<body>
<div style="width:900px heigh:800px; background-color:#0CF" id="whole">
<div id="head" style="width:500px heigh:100px; background-color:#9CF">
<div id="top_left" style="width:250px; height:100px; border:1px solid #F00; float:left">top_left</div>
<div id="top_right" style="width:250px; height:100px; border:1px solid #F00; float:left">top_right</div>
</div><!--head-->
<div id="center" style="width:500px;heigh:400px;">
<div id="center_left" style="width:150px heigh:400px; float:left;background-color:#3CC">
<div id="center_left1" style="width:150px; height:100px; border:1px solid #F00; ">center_left1</div>
<div id="center_left2" style="width:150px; height:300px; border:1px solid #F00; ">center_left2</div>
</div><!--center_left-->
<div id="center_right" style="width:350px; height:400px; float:left; background-color:#F9C" >
<div id="center_right1" style="width:350px; height:100px; border:1px solid #F00; ">center_right1</div>
<div id="center_right2" style="width:350px; height:200px; border:1px solid #F00; ">center_right2</div>
<div id="center_right_top" style="width:350px; height:100px; border:1px solid #F00;">
<div id="center_right_top1" style="width:350px; height:50px; border-bottom:1px solid #F00">center_right_top1</div>
<div id="center_right_top2" style="width:350px; height:50px; ">center_right_top2</div>
</div><!--center_right_top-->
</div><!--center_right-->
</div><!--center-->
</div><!--whole-->
</body>
</html>
代码如上。就是center层的左右两个层不能相邻，是层的宽度和高度的问题吗,
还有一个问题是为什么center_right_top2层下面有一部分空白，。 展开
3个回答
展开全部
<html>
<head>
<title>无标题文档</title>
<style>
#whole{width:900px heigh:800px; background-color:#0CF;}
#head{width:500px heigh:100px; background-color:#9CF;}
#top_left{width:250px; height:100px; border:1px solid #F00; float:left;}
#top_right{width:250px; height:100px; border:1px solid #F00; float:left;}
#center{width:510px;heigh:400px;}
#center_left{width:150px heigh:400px; float:left;background-color:#3CC;}
#center_left1{width:150px; height:100px; border:1px solid #F00;}
#center_left2{width:150px; height:300px; border:1px solid #F00;}
#center_right{width:350px; height:400px; float:left; background-color:#F9C; float:left;}
#center_right1{width:350px; height:100px; border:1px solid #F00;}
#center_right2{width:350px; height:200px; border:1px solid #F00;}
#center_right_top{width:350px; height:100px; border:1px solid #F00;}
#center_right_top1{width:350px; height:50px; border-bottom:1px solid #F00;}
#center_right_top2{width:350px; height:50px; }
.clear{clear:both;}
</style>
</head>
<body>
<div id="whole">
<div id="head" >
<div id="top_left" >top_left</div>
<div id="top_right">top_right</div>
</div><!--head-->
<div class='clear'></div>
<div id="center" >
<div id="center_left">
<div id="center_left1">center_left1</div>
<div id="center_left2">center_left2</div>
</div><!--center_left-->
<div id="center_right">
<div id="center_right1" >center_right1</div>
<div id="center_right2">center_right2</div>
<div id="center_right_top" >
<div id="center_right_top1" >center_right_top1</div>
<div id="center_right_top2" >center_right_top2</div>
</div><!--center_right_top-->
</div><!--center_right-->
</div><!--center-->
</div><!--whole-->
</body>
</html>
宽度别忘记了border的1px。还有你想做成什么样子的？可以详细的描述一下。再有写代码要有序，保持一个良好的写代码习惯，最好把style文件放到css文件中或者写到<head></head>中。
<head>
<title>无标题文档</title>
<style>
#whole{width:900px heigh:800px; background-color:#0CF;}
#head{width:500px heigh:100px; background-color:#9CF;}
#top_left{width:250px; height:100px; border:1px solid #F00; float:left;}
#top_right{width:250px; height:100px; border:1px solid #F00; float:left;}
#center{width:510px;heigh:400px;}
#center_left{width:150px heigh:400px; float:left;background-color:#3CC;}
#center_left1{width:150px; height:100px; border:1px solid #F00;}
#center_left2{width:150px; height:300px; border:1px solid #F00;}
#center_right{width:350px; height:400px; float:left; background-color:#F9C; float:left;}
#center_right1{width:350px; height:100px; border:1px solid #F00;}
#center_right2{width:350px; height:200px; border:1px solid #F00;}
#center_right_top{width:350px; height:100px; border:1px solid #F00;}
#center_right_top1{width:350px; height:50px; border-bottom:1px solid #F00;}
#center_right_top2{width:350px; height:50px; }
.clear{clear:both;}
</style>
</head>
<body>
<div id="whole">
<div id="head" >
<div id="top_left" >top_left</div>
<div id="top_right">top_right</div>
</div><!--head-->
<div class='clear'></div>
<div id="center" >
<div id="center_left">
<div id="center_left1">center_left1</div>
<div id="center_left2">center_left2</div>
</div><!--center_left-->
<div id="center_right">
<div id="center_right1" >center_right1</div>
<div id="center_right2">center_right2</div>
<div id="center_right_top" >
<div id="center_right_top1" >center_right_top1</div>
<div id="center_right_top2" >center_right_top2</div>
</div><!--center_right_top-->
</div><!--center_right-->
</div><!--center-->
</div><!--whole-->
</body>
</html>
宽度别忘记了border的1px。还有你想做成什么样子的？可以详细的描述一下。再有写代码要有序，保持一个良好的写代码习惯，最好把style文件放到css文件中或者写到<head></head>中。
更多追问追答
追问
恩，我只是实验一下嵌套。但是现在我再代码末尾加入一个bottom层，为什么显示的不对呢
bottom
就是想让bottom层在head 和center层下面 ，类似于一个网页基本构架的样子
追答
你在bottom这个上面加一个“”
bottom
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你的width定义错误，center_left1 + center_left2 的宽度之和 + border的宽度之和不能大于center_left的宽度，这样就可以浮动了，也就是相邻。同理center_right的情况也是一样的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
是的，你的各个div的宽高没有计算精确，div的宽度你也要把border的宽加上
<div id="center_left" style="width:150px heigh:400px; float:left;background-color:#3CC">
<div id="center_left1" style="width:148px; height:100px; border:1px solid #F00; ">center_left1</div>
<div id="center_left2" style="width:148px; height:300px; border:1px solid #F00; ">center_left2</div>
</div><!--center_left-->
这样center层的左右两个层就相邻了，center_right_top2层下面有一部分空白，也是你高度没有计算好
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
