和视频中代码一样 为什么没实现left在左边
来源：3-2 圣杯布局案例（了解即可）
慕少5306396
2019-03-19 20:11:20
<!DOCTYPE html>
<html>
<head>
<title>编程练习</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
min-width: 700px;
}
.header,.footer{
float: left;
width: 100%;
height: 40px;
background: #ddd;
line-height: 40px;
text-align: center;
}
.container{
padding: 0 220px 0 200px;
}
.left,.middle,.right{
position: relative;
float: left;
min-height: 100px;
}
.middle{
width: 100%;
background: #1a5acd;
}
.left{
width: 200px;
background: red;
margin-left: 100%;
left: -200px;
}
.right{
width: 220px;
background: green;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>这里是页面中间</p>
</div>
<div class="left">
<h4>left</h4>
<p>这里是页面左边</p>
</div>
<div class="right">
<h4>right</h4>
<p>这里是页面右边</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
1回答
-
Steve007
2019-03-20
同学，你好。视频中老师写的代码是margin-left：-100%，同学写的是margin-left：100%，因此没有实现效果，建议修改如下：
祝学习愉快！
1
相似问题