                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

为什么middle上面有空白？

<<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>lianxi</title>
	<style type="text/css">
	body{margin: 0;padding:0;}
	.left{
		position: absolute;
		width: 200px;
		top:0;left: 0;
		background: #ccc;
		height: 500px;
	}
	.mid{
		height: 500px;
margin: 0 310px 0 210px;
		background: black;
		top:0;
	}
	.right{		
		height: 500px;
		position: absolute;
		width: 300px;top:0;
		right: 0;
		background: #ccc;
	}
	</style>
</head>
<body>
		<div class="left">left</div>
		<div class="mid"></div>
		<div class="right">right</div>
	
</body>
</html>

如图

rabbitter

2016-03-10

源自：如何用CSS进行网页布局 4-1

关注问题我要回答

611

操作

收起

3 回答

ZJD_UESTC
2016-03-27

没有清楚默认样式。

body{margin: 0;padding: 0}

0 回复有任何疑惑可以回复我~

收起回答

big_person
2016-03-11

没有发现太明显错误，不过你的思路有些混乱。

下课之后再给你研究研究

下面我自己写的一段

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>lianxi</title>
    <style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
.outer{ width:800px; height:500px; background-color:red; margin:auto}
.left{ width:300px; height:500px; background-color:blue; float:left}
.right{ width:300px;height:500px; background-color:green; float:right}
.mid{height:500px; background-color:yellow; margin-left:305px; margin-right:305px}
    </style>
</head>
<body>
   <div class="outer">//将左中右看成一个整体
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="mid">骚年加油！</div>
     </div>

</body>
</html>