标签：
要实现如下图所示的布局，可利用圣杯布局或双飞翼布局(紫色部分可伸缩)
圣杯布局
/*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的宽度。
标签：
原文地址：http://www.cnblogs.com/yddlvo/p/4678603.html
