右侧部分，我使用的是 float:right;才可以实现效果
来源：3-2 圣杯布局案例
Horrace
2017-07-11 10:36:50
老师您好。 教程中left、middle、right都是 float:left; 但是我的代码这样设置的话，右侧块的位置不对，我把right的float设置为right即可显示出正确的效果，请问下是什么原因哦，谢谢！
我的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
.* {
margin:0;padding:0;
}
body {
min-width: 700px;
}
.container {
padding:0 220px 0 200px;
}
.left,.middle,.right {
position:relative;
float:left;
min-height:300px;
}
.middle {
background-color:blue;
width:100%;
}
.left {
background-color:red;
width:200px;
margin-left:-100%;
left:-200px;
}
.right {
background-color:green;
width:220px;
margin-left:-100%;
float: right;
/*right:-220px;*/
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="middle">我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的</div>
<div class="left">我是左边的</div>
<div class="right">我是右边的</div>
</div>
</body>
</html>
2回答
-
.right { background-color:green; width:220px; margin-left: -220px; right: -220px; }right这样设置可以解决
0h017-07-11 -
小丸子爱吃菜
2017-07-11
设置有浮动也可以，那么右侧的right值就得设置成220px。
代码的思路只要没问题就可以，至于怎么样，能实现圣杯布局的特点就可以。
祝学习愉快！
0h017-07-12
相似问题