双飞翼布局

Posted 2020-09-27 小哥森

先看一下常规效果：

 

为了快速加载主体内容，我们在布局时候可以把最重要的放在最前面。比如：

<div class="wrap">

<div class="main">main</div>

<div class="left">left</div>

<div class="right">right</div>

</div>

 

实现要求：主间部分内容的宽度是要自适应的，左、右两边宽度分别为20%，30%  

 

首先呢，我们需要把这三列都浮动起来，即：

.main,.left,.right { float:left;  height:200px; }

说明：这里的高度是我自己设置的，在实际布局中可以根据需要来定，他们可以任意设置自己的高度。

 

主体main的宽度要自适应，那么可以先设置为100%，然后随便上个背景色与”翼“做区分 

.main { width:100%;  background:#ace; }

 

接下来便是”翼“的设置了

左边： 

.left { width:20%; background:#eee; }

右边： 

.right { width:30%; background:#ddd; }

 

基本样式已设置完成，但预览页面你会发现并没有达到预期的效果。。。

那么接下来，我们应该怎么做呢？ 

大家可以回想一下margin的用法，对于其负值有很奇妙的用法（这里不多做说明，文章最后我会推荐一些相关文章，感兴趣的童鞋可以看看），而在这里，关键也是运用margin负值才得以实现效果。

 

回到题目中，想要left居左，那么我们可以设置 margin-left:-100%;  即：

.left { width:20%; background:#eee; margin-left:-100%; }     

说明：这里的100%为main的宽度，相当于是把left给左移了，刚好实现左边与main的对齐。

 

对于right居右问题，也是类似可以设置margin-left:30%; 即：

.right { width:30%; background:#ddd; margin-left:-30%; }  

说明：这里的30%为right自身的宽度，相当于是自己向左移了自身的一个宽度，刚好实现右边与main的对齐。

 

这时，整个布局看起来像是完成了，其实还剩关键的一步，即main的位置该如何设置？目前，他的左边及右边部分元素是会被left/right挡住的，所以我们还必须在main里面再添加一个div(class="mainIn")，设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。

 

 延伸：对于这种方法，同时也可以随便调换他们的位置，你只需要控制他们的位移即可，都是成功的，这点大家可以做个尝试。

 

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。