您的位置：首页 > Web前端 > CSS

圣杯布局（双飞翼布局）

2016-12-13 19:20 253 查看

圣杯布局是讨论「三栏液态布局」的实现，它最早出自于谁或许不得而查了。

所谓液态布局是相对固态布局而言的，固态布局就是固定值不变的布局，液态就好比在容器里到了一杯水，它可以随着容器宽度的变化而自适应宽度。（说白了，就是三栏布局，两边固定，中间自适应）

<div id="header">#header</div>

<div id="container">
<div id="center" class="column">#center</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>

<div id="footer">#footer</div>

第一种方法

body {
min-width: 550px;      /* 2x LC width + RC width */
}
#container {
padding-left: 200px;   /* LC width */
padding-right: 150px;  /* RC width */
}
#container .column {
height: 200px;
position: relative;
float: left;
}
#center {
background-color: #e9e9e9;
width: 100%;
}
#left {
background-color: red;
width: 200px;          /* LC width */
right: 200px;          /* LC width */
margin-left: -100%;
}
#right {
background-color: blue;
width: 150px;          /* RC width */
margin-right: -150px;  /* RC width */
}
#footer {
clear: both;
}
#header,
#footer {
background-color: #c9c9c9;
}

/*** IE6 Fix ***/
* html #left {
left: 150px;           /* RC width */
}

第二种方法：

<style type="text/css">
*{
margin:0px;
padding:0px;
}
#left{
position: absolute;
width:200px;
height: 300px;
left: 0px;
top: 0px;
background: red;
}
#center{
margin-left: 200px;
margin-right: 200px;
height: 300px;
background:#ccc;

}

#right{
position: absolute;
width:200px;
height: 300px;
right: 0px;
top: 0px;
background:blue;
}
</style>

第三种方法（CSS3）

<style type="text/css">
#container{
display: -moz-box;
display: -webkit-box;
}
#left{
width: 200px;
padding:20px;
background-color: red;
}
#center{
-moz-box-flex:1;
-webkit-box-flex:1;
padding:20px;
height: 900px;
font-size: 30px;
background-color: yellow;
}
#right{
width: 200px;
padding:20px;
background-color:blue;
}
/* #left,#center,#right{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}*/

</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 布局 html 三栏布局

相关文章推荐

新的分享

章节导航