- 常用于头部排布的双飞翼和圣杯
#双飞翼
两端固定，中路自适应
<style type="text/css">
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.mc {
margin-left: 150px;
display: inline-block;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
position: relative;
right: 190px;
}
<body>
<div class="main">
<div class="mc">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
#圣杯
两端固定，中路自适应
<style type="text/css">
.content {
padding-left: 150px;
padding-right: 190px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
position: relative;
left:-150px;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
}
</style>
<div class="content">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
- 用于列表展示
除最后一个元素其他元素添加底部分割线（例如新闻列表）
<style type="text/css">
ul>li+li{
border-top: 1px red solid;
padding: 15px 0;
}
</style>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
display:table实现多列等高布局
<style type="text/css">
.container{
border: 1px #000 solid;
display: table;
border-spacing: 15px;
width: 100%;
}
.container p{
background-color: #00ffff;
display: table-cell;
border : 1px #000 solid;
}
</style>
<div class="container">
<p style="height: 300px"></p>
<p></p>
<p></p>
<p></p>
</div>
