圣杯布局右侧div设定margin-right：-100%；也是同样效果，有什么区别吗

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{
margin:0;
padding:0;
}
body{
min-width: 700px;
}
.header,.footer{
float: left;
width: 100%;
background-color: #ddd;
height: 40px;
line-height: 40px;
text-align: center;
}
.container{
padding:0 220px 0 200px;
}
.mid,.left,.right{
position: relative;
float: left;
min-height: 300px;
}
.mid{
width:100%;
background-color: #1a5acd;
}
.left{
width: 200px;
background-color: #f00;
margin-left:-100%;
left:-200px;
}
.right{
width: 220px;
background-color: #30a;
margin-right: -100%;
}
</style>
</head>
<body>
<div class="header">这里是顶部</div>
<div class="container">
<div class="mid">
<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">这里是底部</div>
</body>
</html>

慕婉清0895596 2017-09-06

源自：CSS网页布局基础 3-2 圣杯布局案例

29

收起

1回答

小丸子爱吃菜 2017-09-06 15:47:14

效果能实现且布局一样就可以，老师的代码中右侧配合的margin-left和right，圣杯布局本就是一个布局的技巧，能实现就可以！

祝学习愉快！

苍梧翊 #1

请问为什么对right设置margin-right:-100%;可以实现right上移到middle右侧的效果？left使用margin-left:-100%;可以理解是向左移动父元素内容的宽度，那么right呢？

2017-09-11 09:30:29

相似问题

圣杯布局中的float和margin-left

三栏布局

关于圣杯布局的问题

通过padding和margin 留白有什么区别吗

不太理解怎么实现的，麻烦讲解一下

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号