双飞翼HTML圣杯布局,圣杯布局和双飞翼布局的理解与思考

**圣杯布局和双飞翼布局都是前端工程师需要日常掌握的重要布局方式。按照我的理解，其实圣杯布局和双飞翼布局的实现，目的都是在于两栏固定宽度，中间部分自适应

但是实际实现起来 还是有一些区别的

**圣杯布局**

图为：


在这里实现了 左(200px)、右(300px)、中间自适应。

**注：**

**html代码中，middle部分首先要放在最前面部分，然后是left、right，以便先行渲染**

**结构：**


首先定义出整个布局的DOM结构，主题部分是由content包裹的middle、left，right三列，其中middle定义在最前面。

**css**

左侧的固定宽度为200px，右侧的固定宽度为300px，则在content上设置


为左右两列预留出相应的空间


然后分别给三列设置宽度与浮动


得到如下效果：


根据浮动的特性，middle的宽度为100%，所以占据了第一行的所有空间，left和right被挤到了第二行

接下来将left和right放置到之前预留出的位置


随后使用定位position：relative，在left、right

原来的位置基础上左移200，右移300


最终效果为：


**到这基本布局效果已经完成，但还是在考虑最后一步，那就是宽的问题，之前为了预留左右位置设置了padding属性，所以这里计算宽的时候不要忘记了这个**

**双飞翼布局**

**还是以上述格局数据为例，设置各列的宽度与浮动，并且预留出空间**

**结构：**


**双飞翼布局的DOM结构与圣杯布局的区别是middle还有一个子元素inner**

**css**


最终效果为：


**由于双飞翼布局没有用到position：relative**

所以不考虑计算宽度，预留多少空间，就设置多少空间

**如果，您认为阅读这篇博客让你有些收获，请您关注一下。感谢您的支持，如有不足，请多指教。**

**微信号：bsl521921**