# 常用布局方式
# 一列定宽，一列自适应
html结构：
<body>
<div class="left"></div>
<div class="right"></div>
</body>
方式一： 浮动+margin
<style>
.left{
width: 400px;
height: 300px;
background-color: red;
float: left;
}
.right{
height: 300px;
background-color: blue;
margin-left: 400px;
}
</style>
方式二： 浮动+overflow
利用overflow:hidden触发BFC效果。
<style>
.left{
width: 400px;
height: 300px;
background-color: red;
float: left;
}
.right{
height: 300px;
background-color: blue;
overflow: hidden;
}
</style>
方式三： table布局
<style>
body{
display: table;
width: 100%;
}
.left{
width: 400px;
height: 300px;
background-color: red;
display: table-cell;
}
.right{
height: 300px;
background-color: blue;
display: table-cell;
}
</style>
方式四： flex布局
<style>
body{
display: flex;
}
.left{
width: 400px;
height: 300px;
background-color: red;
}
.right{
height: 300px;
background-color: blue;
flex: 1;
}
</style>
TIP
备注：右列定宽，左列自适应，方式一样，变通下方向即可。
# 左右定宽，中间自适应
html结构：
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
方式一： 浮动+margin
<style>
.left{
float:left;
width: 400px;
height: 300px;
background-color: red;
}
.center{
float: left;
width: calc(100% - 400px);
margin-right: -300px; //相当于右侧挖个定宽的坑给右侧容器盒子
height: 300px;
background-color: pink;
}
.right{
float: right;
width: 300px;
height: 300px;
background-color: blue;
}
</style>
方式二： table布局
<style>
body{
display: table;
width: 100%;
height: 200px;
}
.left,.center,.right{
display: table-cell;
}
.left{
width: 400px;
background-color: red;
}
.center{
background-color: pink;
}
.right{
width: 300px;
background-color: blue;
}
</style>
方式二： flex布局
<style>
body{
display: flex;
height: 300px;
}
.left{
width: 400px;
background-color: red;
}
.center{
flex: 1;
background-color: pink;
}
.right{
width: 300px;
background-color: blue;
}
</style>