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

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

圣杯布局和双飞翼布局都是前端工程师须要平常掌握的重要布局方式。按照个人理解，其实圣杯布局和双飞翼布局的实现，目的都是在于<font color=red>两栏固定宽度，中间部分自适应</font>

可是实际实现起来 仍是有一些区别的

圣杯布局

图为：

在这里实现了 左（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