圣杯布局与双飞翼布局

要实现如下图所示的布局，可利用圣杯布局或双飞翼布局(紫色部分可伸缩)

 

圣杯布局

 

 /*css代码*/
        #head{
            height: 200px;
            background: red;
        }
        #foot{
            height:200px;
            background: pink;
        }
        #content{
            padding: 0px 200px 0px 150px;
            overflow: hidden;
        }
        #main{
            width:100%;
            background: purple;
            float: left;
        }
        #left{
            width: 150px;
            background: yellow;
            float: left;
            position: relative;
            margin-left: -100%;
            left: -150px;
        }
        #right{
            width: 200px;
            background: green;
            float: left;
            margin-right: -200px;
        }
        #left,#right,#main{
            padding-bottom: 10000px;
            margin-bottom:-10000px;
        }


<!--html代码-->
   <div id="head">head</div>
   <div id="content">
       <div id="main">
           <p>内容内容内容内容内容内容内容</p>
           <p>内容内容内容内容内容内容内容</p>
           <p>内容内容内容内容内容内容内容</p>
           <p>内容内容内容内容内容内容内容</p>
       </div>
       <div id="left">
           <ul>
               <li>左菜单一</li>
               <li>左菜单二</li>
               <li>左菜单三</li>
           </ul>
       </div>
       <div id="right">
           <ul>
               <li>右菜单一</li>
               <li>右菜单二</li>
               <li>右菜单三</li>
           </ul>
       </div>
   </div>
   <div id="foot">foot</div>

 

布局的关键在id为content,main,left,right的四个div，在圣杯布局中，content的左右内边距分别为left和right的宽度，main,left,left均向左浮动，利用margin把left和right分别放到main左右两边的空白处。

 

 

 

 

双飞翼布局

 

 /*css代码*/
        #head{
            height: 200px;
            background: red;
        }
        #foot{
            height:200px;
            background: pink;
        }
        #content{
            overflow: hidden;
        }
        #text{
            margin-right: 200px;
            margin-left: 150px;
        }
        #main{
            width:100%;
            background: purple;
            float: left;
        }
        #left{
            width: 150px;
            background: yellow;
            float: left;
            position: relative;
            margin-left: -100%;
        }
        #right{
            width: 200px;
            background: green;
            float: left;
            margin-left: -200px;
        }
        #left,#right,#main{
            padding-bottom: 10000px;
            margin-bottom:-10000px;
        }



<!--HTML代码-->
<div id="head">head</div>
<div id="content">
    <div id="main">
        <div id="text">
            <p>内容内容内容内容内容内容内容</p>
            <p>内容内容内容内容内容内容内容</p>
            <p>内容内容内容内容内容内容内容</p>
            <p>内容内容内容内容内容内容内容</p>
        </div>
    </div>
    <div id="left">
        <ul>
            <li>左菜单一</li>
            <li>左菜单二</li>
            <li>左菜单三</li>
        </ul>
    </div>
    <div id="right">
        <ul>
            <li>右菜单一</li>
            <li>右菜单二</li>
            <li>右菜单三</li>
        </ul>
    </div>
</div>
<div id="foot">foot</div>

 

双飞翼是由圣杯布局演变而来的，对比两种布局的html可知，在双飞翼中，main中的内容外面还嵌套了一个id为text的div，这就决定了css的不同。双飞翼布局中，content并没有设置左右内边距，而设置了text的左右外边距，左右边距分别为left和right的宽度。