关于双飞翼布局的个人操作总结

来源：互联网发布：蓝牙共享网络上不了网编辑：程序博客网时间：2024/06/09 12:27

今天boss让我用双飞翼布局实现一个文字左右都有图片的三列效果，虽然最后把双飞翼研究明白了，但是效果的预期没有达到，最后就用其他方法了，但是学习的过程值得记录下来，以便后续使用时，方便查阅。

首先，我想说的是，很多框架都支持响应式布局，而双飞翼只是一种不依赖框架的针对三列布局的一种解决方案。

双飞翼布局能够解决的问题：

1、两边列宽度固定，中间列宽度自适应式布局；

2、中间内容区先被加载。

实现方法：

第2点比较好实现，只要把中间内容区写在最前面那么就会被先加载。

接下来就是实现这种布局了，首先我们想让中间区域能够宽度自适应，那么我们需要把中间区域的div设置成“width=100%”，两边区域的div也设置一下宽度，这里我都设置成”width=200px”。那么左右两边的div就会被挤到下一行中。

既然如此敲黑板的地方就到了，首先我们想办法将左边的div放到左边，那么我们将其margin-left设置成-100%（这里设置负值的原因，是在浮动情况下，将外边距设置成负值，div会向上层移动，而设置成-100%，则能够保证div上移到最左边）,如下：

下面同理我们要想将右边的div能够与上面的同行显示在右边，那么我们给右边的div设置一个“margin-left=-200px”，大家可以注意到这里的负值与div的宽度相等，结果如下：

到了这里当然还没有结束，大家应该已经注意到，内容区的文字不见了，是因为左div将其挡住了，为了不让左右div挡住中间内容，我们还要给中间的div中加一个子div并给其设置一个“margin：0 200px”。

如此就将双飞翼的效果实现出来啦，所有的代码入下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>双飞翼布局</title><style>.main, .left, .right { float: left; height: 100px; color: #fff; }.main { width: 100%; background: red; }.main-content { margin: 0 200px; }.left, .right { width: 200px; }.left { background: green; margin-left: -100%; }.right { background: blue; margin-left: -200px; }</style></head><body><div class="wrap"><div class="main"><div class="main-content">我是中间内容区~</div></div><div class="left">我是左边</div><div class="right">我是右边</div></div></body></html>

在最后说下双飞翼布局的优点：

1、可以实现主要内容区先加载；

2、兼容主流浏览器；

3、布局灵活，改变css即可改变布局方式。

阅读全文

1 0