我们会遇到这样的一种场景，需要一种布局，要求有一部分是定宽（垂直一个思想，只不过不用浮动），剩下的要充满剩余的宽度，这个时候我们就可以使用“圣杯布局”： 1.我们简单做一下： <!DOCTYPEHTM
我们会遇到这样的一种场景，需要一种布局，要求有一部分是定宽（垂直一个思想，只不过不用浮动），剩下的要充满剩余的宽度，这个时候我们就可以使用“圣杯布局”：
1.我们简单做一下：
<!DOCTYPE HTML><html><head><style>*{ margin:0px; padding:0px;}.basic{ float:left; height:200px; position: relative; color:#fff;}#main{ width:100%; background:#0f0;} #left{ width:190px; background:#f00; margin-left: -100%;}#right{ width:190px; background:#00f; margin-left: -190px;}.wrap{ overflow: hidden; padding:0px 190px;}</style><head><body><div class="wrap"> <div class="basic" id="main">middle </div> <div class="basic" id="left">left </div> <div class="basic" id="right">right</div></div></body></html>
大家可以注意到，为了达到“充满的效果“，我们的main设置了 width:100%;那么我们的left就要做负margin 100%，right就要做负margin 本身的宽度，这里是-190px，一遍能充满一行，看一下效果：
2.这里有个什么问题？我们的middle被覆盖了，这个不行，我们要解决一下，可以给wrap部分加个padding，左右给left、right做个让位，之后再对左右进行定位，改一下看看
.wrap{ overflow: hidden;//做了个清除浮动，养成好习惯 padding:0px 190px;}
a.对wrap设个padding，看下效果
b.已经给left和right让位了，剩下的就是对他们俩做相对定位了：
#left{ width:190px; background:#f00; margin-left: -100%; position: relative; left: -190px;}#right{ width:190px; background:#00f; margin-left: -190px; position: relative; right: -190px;}
再看一下效果：
好了，中间的”middle“已经出来了，中间的绿色跟最初代销不一致是因为我拖过窗口了，然后还有点亮看不大清字，就不调了，这就是”圣杯布局“；
ps：这其实就是一种思想，垂直做高度也一样，只是不用浮动了，margin就可以解决，基本的思路都是一样的；
