简版双飞翼

最新推荐文章于 2025-06-03 09:19:53 发布

转载最新推荐文章于 2025-06-03 09:19:53 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gyw1996/p/10136205.html

本文介绍了一种简化版的双飞翼布局方法，该方法虽不支持优先加载中间部分，但易于理解和使用。文章提供了简版双飞翼的HTML和CSS代码示例，并解释了其工作原理。

双飞翼的布局主要优点是：优先显示中间部分，优先加载主要部分。

简版双飞翼布局虽然也可以实现双飞翼布局的样式，但并不具有优先加载中间部分的特点；简版双飞翼的优点就是比较容易理解，容易看懂，容易记忆，以及容易布局，需要用双飞翼时，若实在无法搞定原版的双飞翼布局，可以拿简版来代替。（建议尽量还是用原版的双飞翼布局，此布局仅做补充，替代）

简版双飞翼HTML:

<div class="warp">
           <div class="left">left</div>
           <div class="right">right</div>
           <div class="centent">centent</div>
</div>

简版双飞翼CSS:

.warp{
               width: 70%;
               height: 500px;
               margin: 0 auto;
           }
           .left{
               float: left;
               width: 200px;
               height: 500px;
               background: cadetblue;
           }
           .right{
               float: right;
               width: 200px;
               height: 500px;
               background: cadetblue;
           }
           .centent{
               height: 500px;
               background: cornflowerblue;
               margin:0 210px;
           }