这就是普通的让三个div左浮动显示出来的效果；
2、我们让Left和Right与main在同一排，这里需要用到margin-left的负值，这里如果margin-left是负值，我理解的是在此基础上往左边移，设置Left的margin-left:-100%，也就是往左移main的整个宽度，这时Left的左边缘跟main的左边缘重叠，即Left的150px宽覆盖住了main的150px宽；
这时Right跑到左边了，再对Right设置margin-left:-190px;即right也跑到上面去了，Right的右边缘和main的右边缘对齐，Right的宽度覆盖了main的右边的宽度；现在Left和Right都跑上面去了，但是需要注意的是main的值不见了，因为它被覆盖了，设置left和right的margin值只是改变Left和Right的位置，对于main来说还是在以前的位置上，接下来要考虑的问题就是如何定位main的位置？
3、需要给con容器加padding值，padding值的作用是给这整个容器均移动padding值，如在刚开始Left和Right没上移的时候，给con加padding值的效果如下：
现在在Left和Right以及main都在同一排的情况下，加padding的值，就把main的定位到合适的位置了，但是这时的问题是：Left和Right也跟着一起缩了，所以要把Left和Right定位带之前的位置，该怎么定位呢？
4、这时Left和Right需要用到css 的left属性了，left 属性规定元素的左边缘,该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。注意使用属性left的时候要给这个元素定位，绝对定位和相对定位都可以，如果不使用定位的话没有效果，具体为什么我也不知道，大家可以自行百度。
Left的css样式加上：position:relative;left：-150px; 同理css的right属性也是如此，position:relative;right:-190px; Left和Right回到它们各自的位置上，OK，完成圣杯的布局，效果图贴上：
完整代码：
[html] view plain copy
<!-- 圣杯布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.con {
padding-left: 150px;
padding-right: 190px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
position: relative;
left:-150px;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
position: relative;
right: -190px;
}
</style>
</head>
<body>
<div class="con">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
双飞翼布局
双飞翼布局可以看成是对圣杯布局的改进，因为圣杯布局用到的标签属性较多，用着也较麻烦，所以淘宝玉伯大大就提出来双飞翼的布局，双飞翼是把三列布局比作鸟，中间栏是鸟身，两边宽是鸟的两翼，重要的是鸟的身体摆好，再安两翼。思路和圣杯布局一样，这里我还是以上一个作例子，用到main，left，right（其实用main sub extra更形象）。前两步都是一样的，重要的是第三步，在前两步的完成后已经形成同行排列，只不过main值被覆盖了，圣杯布局的第三步是给con容器添加padding属性，而双飞翼布局是为main里面的内容再加一个div，让main的内容包含在内层div里，
[html] view plain copy
<body>
<div class="con">
<div class="main">
<div class="mc">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
这时，只要设置mc的margin属性就可以实现三列布局了，而且main也正常显示；这里，不用设置con容器的padding属性，也不用给Left和Right运用left，right属性，因为设置padding属性就是为了不覆盖main的值，现在将main里的内容放在一个div里，再为它设置margin属性，也就实现了不遮挡main里面的内容值，因此双飞翼布局使用属性个数减少，看着更简便。代码如下：
[html] view plain copy
<!-- 双飞翼布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.mc {
margin-left: 150px;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
}
</style>
</head>
<body>
<div class="con">
<div class="main">
<div class="mc">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
如对本文有疑问， 点击进行留言回复！！
css深入剖析transform的translate和perspective
HCIE第四天总结（典型组网之一：CSS+Eth-Trunk+iStack）
了解下Apache Elasticsearch 和 Kibana
我要评论
网友评论