您的位置：首页 > 其它

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

2017-05-23 21:39 302 查看

今天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即可改变布局方式。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  双飞翼布局 响应式布局 布局
相关文章推荐
新的分享
章节导航