两栏布局
特点：
侧边栏固定宽度，主体随着屏幕宽度自适应。
- CSS代码
{
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 100%;
height: 100vh;
}
.wrap .left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background-color: #377c79;
}
.wrap .main {
padding-left: 200px;
height: 100%;
background-color: #5f7399;
}
- HTML代码
<div class="wrap">
<div class="left"></div>
<div class="main"></div>
</div>
三栏布局
圣杯模式
两边侧边栏固定宽度，主体随着屏幕宽度自适应。
- CSS代码
* {
margin: 0;
padding: 0;
}
html,
body,
.container {
height: 100%;
}
.container {
margin: 0 300px 0 250px;
}
.container .column {
position: relative;
float: left;
height: 100%;
}
.container .middle {
width: 100%;
background-color: #360d0d;
}
.container .left {
left: -250px;
width: 250px;
margin-left: -100%;
background-color: rgb(224, 140, 140);
}
.container .right {
width: 300px;
margin-right: -300px;
background-color: #81753c;
}
- HTML代码
<div class="container">
<!--注意：主体内容一定要写前面，便于浏览器优先解析和渲染-->
<div class="column middle"></div>
<div class="column left"></div>
<div class="column right"></div>
</div>
双飞翼模式
两边侧边栏固定宽度，主体随着屏幕宽度自适应。
- CSS代码
* {
margin: 0;
padding: 0;
}
html,
body,
.container {
height: 100%;
}
.container .column {
position: relative;
float: left;
height: 100%;
}
.container .middle {
width: 100%;
background-color: #277e8d;
}
.container .middle .main {
margin: 0 300px 0 250px;
}
.container .left {
width: 250px;
margin-left: -100%;
background-color: rgb(224, 140, 140);
}
.container .right {
width: 300px;
margin-left: -300px;
background-color: #81753c;
}
- HTML代码
<div class="container"> <!--注意：主体内容一定要写前面，便于浏览器优先解析和渲染--> <div class="column middle"> <div class="main">123</div> </div> <div class="column left"></div> <div class="column right"></div> </div>
