双飞翼布局内容不换行_前端布局那点事

这篇文章主要聊一聊布局这件大事。

只要开始步入前端的大门，布局这件事就是逃避不了的，这也是前端开发人员必修的内功。

所以接下来这篇文章我们主要讲一讲圣杯布局和双飞翼布局。

当然如果你已经非常了解这两个布局的话，可以选择忽略以下内容。

总的来说，这两个布局都是基于同一个想法就是左右侧栏宽度固定，中间内容栏实现宽度自适应，但是这两个布局的实现方式又是有所不一样的。

1.圣杯布局：

布局代码

注意顺序

注意：.container应该设置最大宽度是100%，如果设置为宽度100%，则会因为添加内边距的原因，导致容器的宽度大于浏览器的宽度。

当前实现效果：

效果图

接下来，实现圣杯布局的核心做法：

使用浮动使元素脱离文档，然后利用margin使left块固定到middle的左边，right块固定到middle的右边，然后利用相对定位将左右块移动到自己的位置，这样圣杯布局就完成了，具体的实现代码请看下图：

PS：利用margin-left:-100%将left块拉到左边，margin-left:-220px将right块拉到右边

效果图：

圣杯布局

这样就实现了圣杯布局。

当然也可以利用box-sizing:border-box实现圣杯布局：

修改当前的代码：

这样也可以实现上述圣杯布局的效果。

2.双飞翼布局

双飞翼与圣杯布局最大的区别在于双飞翼主要利用的外边距实现的。

调整当前网页布局结构：

在middle块中添加了middle-body

删除了.containert的内边距，宽度设置为100%;

当前效果：

我们可以从中看到，“我是middle”这几个字被左边的块挡住了，

接下来我们利用margin使“我是middle”这几个字出现

此时效果图

这样，双飞翼布就完成了。

如果你也喜欢前端，那就点个关注吧，嘻嘻嘻。