双飞翼布局

来源：互联网发布：@select动态sql 编辑：程序博客网时间：2024/05/08 18:46

    采用三栏式布局时所提出的要求一般是左栏与右栏定宽，中间部分宽度自适应，中间部分作为内容主体，我们需要将其放在左栏与右栏之前来达到优先渲染的效果。一般采用双飞翼布局和圣杯布局。    双飞翼布局与国外的圣杯布局有着相似的思路，但是在某些细节上也有不同点。    二者的主要技术要点：浮动、负边距、相对定位position：relative；    二者的不同之处在于处理主体mian部分时，圣杯布局是将main、left、right部分的父元素使用padding来左右留出left、right的宽度，然后将left、right部分使用 position:relative; 来定位到相应的位置；    而双飞翼布局是给主体main部分增加一个div来包括文章内容，新增的div使用margin增加左右边距隔离left、right部分，没有用到position:relative;（相对定位）。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">    <title>双飞翼布局</title>    <style>        *{            margin:0;            padding:0;        }        div{            color:#fff;            font-size: 16px;            line-height: 3;            text-indent: 2em;        }        .header{            background:#205488;            width:100%;            height:150px;        }        .footer{            background:#2E5D5C;            width:100%;            height:100px;        }        .article{            background:#EAD335;            width:100%;            min-width:900px;            overflow:hidden;            clear:both;            _zoom:1;        }        /* 三列等高的样式 */        .article>div{            float:left;            padding-bottom: 9999px;            margin-bottom: -9999px;        }        .article .main{            background:#35CA7F;            width:100%;        }        .article .main-inner{            background: #FD893B;            margin:0 150px 0 200px;        }        .article .left{            background: #18C3BD;            width:200px;            margin-left:-100%;        }        .article .right{            background: #3890E8;            width:150px;            margin-left:-150px;        }    </style>   </head><body><!-- header --><div class="header">    头部，通常放置logo、导航、banner图等</div><!-- article --><div class="article">    <!-- main -->    <div class="main">        <div class="main-inner">            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>            <p>内容部分</p>        </div>    </div>    <!-- left -->    <div class="left">        左侧边栏    </div>    <!-- right -->    <div class="right">        右侧边栏    </div></div><!-- footer --><div class="footer">    尾部，通常放置版权信息等</div></body></html>

0 0