圣杯与双飞翼布局代码总结

17-02-24 来源：[db:作者]

收藏我要投稿

圣杯与双飞翼布局代码总结

1.圣杯布局

定义：

圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体都是三栏全部float:left浮动，而在解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的。

代码如下：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>shengbeibuju</title> 
<style>
#hd{
    height:50px;
    background: yellow;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:green;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative; /*一定要加定位*/
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:green;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: red;
    text-align: center;
}
</style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>

1.双飞翼布局

定义：

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

代码如下：

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>shuangfeiyi</title> 
<style>
    body{
        padding:0;
        margin:0
    }
    .header,.footer{
         width:100%; 
         background: yellow;
         height:70px;
         clear:both;
     }
        .left{
            background: green;
            width:150px;
            float:left;height:100px;
            margin-left:-100%;
            /*position: relative;*/  /*相对于圣杯布局而言，这里不用加定位*/
            /*left:-150px;*/
        }
        .main{
            background: blue;
            width:100%;
            height:100px;
            float:left;
 
        }
        .right{
            background: green;
            width:190px;
            float:left;
            height:100px;
            margin-left:-190px;
            /*position:relative;*/
            /*right:-190px;*/
        }
        .inner{
 
            margin-left:150px;
            margin-right:190px;
        }
</style>
</head>
<body>
<div class="header">Header</div>
<div class="bd">
    <div class="main">
        <div class="inner">   <!-- 这里在中间的div中再嵌套一个div -->
            内容
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>
</body>
</html>

点击复制链接与好友分享!回本站首页