1.弹性布局:css3新增,使用简单
<style type="text/css">
.layout {
display: flex;
margin: 10px 0;
line-height: 50px;
text-align: center;
}
.layout__main {
flex: 1;
background-color: #4DBCB0;
}
.layout__aside {
width: 200px;
background-color: #daf1ef;
}
</style>
<div class="layout">
<aside class="layout__aside">左侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
<aside class="layout__aside">右侧边栏宽度固定</aside>
</div>
2.经典浮动 :脱离文档流仍然占据空间
<style type="text/css">
* {
margin: 0;
padding: 0;
line-height: 50px;
text-align: center;
}
.layout__aside {
width: 200px;
float: left;
background: #daf1ef;
}
.layout__main {
margin-left: 210px;
background: #4DBCB0;
}
.clear {
clear: both;
}
</style>
<aside class="layout__aside">侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
<footer class="clear">底部</footer>
<footer>底部2</footer>
3.margin负值结合padding的浮动:先计算各自宽高再浮动布局
<style type="text/css">
.layout__aside,
.layout__main {
float: left;
}
.layout {
padding-left: 210px;
}
.layout__main {
width: 100%;
background-color: #4DBCB0;
}
.layout__aside {
width: 200px;
margin-left: -210px;
background-color: #daf1ef;
}
</style>
<div class="layout">
<aside class="layout__aside">侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
</div>