三列布局

介绍几种左中右布局，左右定宽，中间自适应，扩展阅读可搜索关键字：圣杯布局，双飞翼布局

注：建议全部布局都要有个包裹container并设置min-width（或width）等于设计稿所给尺寸，防止浏览器尺寸变化形成样式混乱。另，简易布局为笔者根据经验所写，若有不妥的地方欢迎指导修改。

效果图：

对比：

	优势	缺点	备注
圣杯	1.有效利用外层包裹结构 2.中间部分优先渲染	1.代码量最多 2.因外包裹涉及到padding，因此要注意box-sizing:border-box时对总体宽度形成的印象	虽代码量较多，可是较双飞翼结构简单。在实际开发当中考虑到子元素的绝对定位问题，一般会给外包裹添加position:relative。所以，这多余出的代码量也就不算什么了。
双飞翼	1.不依赖外层包裹 2.中间部分优先渲染	main须要再嵌套一层	左右结构比较清晰，较容易理解。可是因为中间多了一层子元素，使得结构复杂了一层。可视状况而定。
简易	不依赖外层包裹	中间部分最后渲染	由于不须要优先渲染中间部分，因此限制就少，所以也是三者中代码量最少的。如无特别须要，平时开发利用此布局便可。

代码：

圣杯

html：

<div class="grail-container">
    <div class="grail-main"></div>
    <div class="grail-left"></div>
    <div class="grail-right"></div>
</div>

css:

.grail-container { padding: 0 220px 0 230px; }
.grail-main { float: left; width: 100%; }
.grail-left { float: left; position: relative; width: 230px; margin-left: -100%; left: -230px; }
.grail-right { float: left; position: relative; width: 220px; margin-left: -220px; right: -220px; }

 

双飞翼

html：

<div class="wing-container">
    <div class="wing-main">
        <div class="wing-submain"></div>
    </div>
    <div class="wing-left"></div>
    <div class="wing-right"></div>
</div>

css:

.wing-container {}
.wing-main { float: left; width: 100%; }
.wing-submain { margin: 0 220px 0 230px; }
.wing-left { float: left; width: 230px; margin-left: -100%; }
.wing-right { float: left; width: 220px; margin-left: -220px; }

简易布局

html：

<div class="diy-container">
    <div class="diy-left"></div>
    <div class="diy-right"></div>
    <div class="diy-main"></div>
</div>

css:

.diy-container{}.diy-left{float: left; width: 230px;}.diy-main{margin: 0 220px 0 230px;}.diy-right{float: right; width: 220px;}