圣杯布局
两端固定 中间自适应
代码如下:
DOM结构:
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
CSS结构:
body {
min-width: 550px;
}
#container {
padding-left: 200px;
·padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
background: #ccc;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background: blue;
}
#right {
width: 150px;
margin-right: -150px;
background:orange;
}
#footer {
clear: both;
}
双飞翼布局
中间固定 两端自适应
代码如下:
DOM结构
<div id="header"></div> <div id="container" class="column"> <div id="center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> <div id="footer"></div>
CSS代码
body {
min-width: 500px; } #container { width: 100%; } .column { float: left; } #center { margin-left: 200px; margin-right: 150px; } #left { width: 200px; margin-left: -100%; } #right { width: 150px; margin-left: -150px; } #footer { clear: both; }