css三列布局之双飞翼pk圣杯

三列布局：两边定宽，中间自适应！

看到这个问题，我第一眼想的就是两边定宽float左右，中间加一个margin宽度自适应或者直接设一个overflow：hidden触发bfc机制，这样也可以，看上去也没什么问题，但是html中div的顺序却是

（就用class名字来代表它的位置）通常我们的主体内容是放在main里面的，但是在html的顺序中确是最后加载，因为如果最先加载main，main占据整行下面的left，right就不会自己浮动上去，所以这样肯定是不完美的！

所以接下来我们介绍的两种方式就是完美的实现这种布局，让main最先加载，而且完美的解决兼容性问题。

第一种叫做圣杯布局：

思路是main left right全部float：left，这样，main就会不再具有块级元素的特性main的宽度设置100%同时，此时给left设置一个margin-left：-100%，给right设置一个margin-right：-它自身的宽度，这样我们就硬性的把它们放到了一行上，但是实际上此时left和right是覆盖在了main的两边，这样肯定是不行的！因为会遮盖一些我门想要展示的东西！所以我们还需要做一些事情。这里有两种方法第一种是将main的box-sizing变成border-box，然后直接给main设置padding，padding-left和padding-right分别是两边定宽元素的宽度，我们做的首先是改变盒模型这样加padding后不会改变自己在浏览器中占的位置，然后在设置padding就可以了，但是box-sizing这个属性是css3的属性，所以兼容性没有那么好，如果你对兼容性的要求没有那么高，这是一种很好的选择！如果你对兼容性要求比较严格，那么就需要用到我们的第二种方法：首先我们得我们的 main left right加一个父盒子，为父盒子设置padding，然后再为left right分别设置为相对定位，然后设置一个margin的负值就达到了目的！这样是不是豁然开朗，原理其实很简单，下面是我们的css代码：

        .box{
            padding: 0 200px;
        }
        .middle{
            width: 100%;
            background: pink;
            height: 200px;
            float: left;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: skyblue;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background: skyblue;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }

View Code

html：

                <div class = "box">
			<div class = "middle">11</div>
			<div class = "left"></div>
			<div class = "right"></div>
		</div>

　我把设置box-sizing的代码也放在这儿，大家可以参考！

        *{
            box-sizing: border-box;
        }
        .middle{
            width: 100%;
            background: pink;
            height: 200px;
            float: left;
            padding: 0 200px;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: skyblue;
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background: skyblue;
            margin-left: -200px;
        }

　下面是我们要说的第二种方式：双飞翼布局（名字都不是我起的）

如果你好好看过上一种布局的原理，这个理解起来就很快了！它首先也需要把main left right硬性的放在同一行，不过是换了一种让main内容全部显示的方法，方法就是在main的内部，加一个div，这个div设置一个margin，left rigth的值分别是margin-left和margin-right的值！这样真正要显示的内容实际放在middle>div里！是不是很好理解。

两个原理都明白了之后，双飞翼和圣杯的区别也显而易见！他们都可以完美的实现布局，解决兼容性的问题，但是双飞翼所需的代码明显比圣杯的少，而且思路更加简单一点，所有略胜一筹，实际上双飞翼就是圣杯的优化！青出于蓝而胜于蓝是很正常的事情！

下面是双飞翼布局的代码！大家参考一下

css：

        .middle{
            width: 100%;
            height: 200px;
            float: left;
            background: skyblue;
        }
        .middle>div{
            margin:0 100px;
        }
        .left{
            width: 100px;
            float:left;
            height: 200px;
            background: pink;
            margin-left: -100%;
        }
    
        .right{
            margin-left:-100px;
            width: 100px;
            float:left;
            height: 200px;
            background: pink;
        }

View Code

html

                <div class = "middle">
			<div></div>
		</div>
		<div class = "left"></div>
		<div class = "right"></div>

最终效果图！二者是一样的

手打博客，转发要注明噢！