方法1:利用浮动
<div class="wrap">
<div class="header">我是头部</div>
<div class="body">
<div class="main">
<div class="main-inner">我是中路</div>
</div>
<div class="sub">我是左边</div>
<div class="extra">我是右边</div>
</div>
<div class="footer">我是脚部</div>
</div>
---css样式
html,
body,
div {
padding: 0;
margin: 0;
}
.header,
.footer {
width: 100%;
height: 40px;
background: #ccc;
border: 1px solid #000;
}
.body .main {
float: left;
width: 100%;
background: pink;
min-height: 200px;
}
.body .main .main-inner {
margin: 0 220px;
}
.body .sub {
float: left;
background: yellowgreen;
margin-left: -100%;
width: 220px;
min-height: 200px;
}
.body .extra {
float: left;
background: orange;
margin-left: -220px;
width: 220px;
min-height: 200px;
}
.footer {
clear: both;
}
方法2:利用c3
<div class="container">
<div class="middle">我是中路</div>
<div class="left">我是上路</div>
<div class="right">我是下路</div>
</div>
--样式
.container {
display: -webkit-box;
}
.left {
width: 250px;
background: greenyellow;
-webkit-box-ordinal-group: 1;
}
.right {
width: 250px;
background: orange;
-webkit-box-ordinal-group: 3;
}
.middle {
-webkit-box-flex: 1;
background: pink;
-webkit-box-ordinal-group:2;
}
方法3:利用position
<div class="content">
<div class="center-ct">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
---css样式
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100%;
position: relative;
background: #cff;
}
.left {
width: 200px;
height: 100%;
background: #0f0;
position: absolute;
left: 0;
top: 0;
}
.right {
width: 200px;
height: 100%;
background: #ff0;
position: absolute;
right: 0;
top: 0;
}
.center-ct {
height: 100%;
background: #60f;
position: absolute;
top: 0;
left:0;
margin:0;
width: 100%;
}
.center {
margin: 0 200px;
}