三栏布局-左右定宽，中间自适应
flex弹性盒子
思想：容器内的项目自动调整
只需在左右的俩个项目中调整flex-basis设置固定宽度即可
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.con {
width: 100%;
height:100%;
background: red;
display: flex;
display: -webkit-flex;
/* flex-direction: row;
justify-content: center;
align-items: center; */
}
.left,.right{
flex:0 1 300px;//属性flex-grow,flex-shrink,flex-basis简写
height: 100px;
background: green;
}
.middle{
flex-grow: 1;
height: 100px;
background: black;
}
</style>
<body>
<div class="con">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
</body>
float+margin布局
思想：左右盒子均float，左边左浮动，右边右浮动。中间文档流使用margin将其称出来。
出现问题：右边的那栏另起一行居右
解决：将中间那栏放在最后面
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
float:left;
height: 100px;
width: 300px;
background: yellow;
}
.right{
float:right;
height: 100px;
width: 300px;
background: green;
}
.middle{
margin: 0 300px;
height: 100px;
background: black;
}
</style>
<body>
<div class="con">
<div class="left">1</div>
//注意顺序
<div class="right">3</div>
<div class="middle">2</div>
</div>
</body>
绝对定位布局
思想：左中右均绝对定位，外包盒子相对定位
中间盒子左右各距离左右的宽度
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.con{position: relative;}
.left,.right,.middle{
position: absolute;
}
.left{
left:0;
height: 100px;
width: 300px;
background: yellow;
}
.right{
right:0;
height: 100px;
width: 300px;
background: green;
}
.middle{
left:300px;
right:300px;
height: 100px;
background: black;
}
</style>
<body>
<div class="con">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
</body>