为什么我的圣杯会塌

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.container{
padding:0 220px 0 200px;
height:200px;
}
.middle{
height:200px;
background-color: #f00;
float:left;

width:100%;
}
.left{
height:200px;
background:#0f0;
width:200px;
float:left;
margin-left:-100%;
position: relative;
left:-200px;
}
.right{
height:200px;
background-color: #00f;
width:220px;
float:left;
margin-left:-220px;
position: relative;
right:-220px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

在页面分辨率缩减到620px的时候，圣杯布局会塌，而双飞翼布局不会塌，这是什么原因？有哪里写错了？

学东西要快 2017-09-03

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

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2017-09-05 13:43:35

你好，这里并没有明确的规定，而是测试得到的结果，这种情况一般是要设置最小宽的，而且，缩小的也有些小了。建议：使用圣杯布局是可设置最小宽度。

祝学习愉快~

收起回答

学东西要快提问者 #1

非常感谢！

2017-09-05 17:14:38

好帮手慕糖 2017-09-04 18:16:21

你好，这里middle元素还占有一定的宽度，你可以测试下，当整体为620px的时候，middle会占200px（这个值可能跟设置的最小的padding值是有关的，你可以改变下值来测试下，若左内边距为100px的时候，middle小于100时就会挤下去）；小于这个值时就会挤下去，双飞翼布局不会出现这种情况，是因为二者的原理不同，圣杯布局，中间部分的是百分百，且圣杯布局左右的宽度是固定的。

祝学习愉快~

收起回答