三列布局问题，即左右宽度固定，中间自适应；
提供三种方案：
- 绝对定位 + 中间板块不给宽度
- 两侧浮动 + 中间自动撑开
- Flex布局
绝对定位 + 中间板块不给宽度
代码如下：
<style>
div {
border: 3px solid darkblue;
height: 300px;
}
.con{
position: relative;
height: 100%;
text-align: center;
}
.left{
position: absolute;
width: 50px;
left: 0px;
top: 0px;
}
.right{
position: absolute;
width: 50px;
right: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="con">
<div class="left">左左左</div>
<div class="mid">中中中</div>
<div class="right">右右右</div>
</div>
</body>
两侧浮动 + 中间自动撑开
中间宽度利用margin撑出；
注意三个div的顺序排列；
代码如下：
<style>
div {
border: 3px solid darkblue;
height: 300px;
}
.con{
height: 100%;
text-align: center;
}
.left{
float: left;
width: 50px;
}
.right{
float: right;
width: 50px;
}
.mid{
margin: 0 53px;
/* overflow: hidden; 使用这句触发BFC */
}
</style>
</head>
<body>
<div class="con">
<div class="left">左左左</div>
<div class="right">右右右</div>
<div class="mid">中中中</div>
</div>
</body>
Flex布局
左右使用 flex-basis
中间使用 flex-grow
代码如下：
div {
border: 3px solid darkblue;
height: 300px;
}
.con{
height: 100%;
text-align: center;
display: flex;
}
.left{
flex-basis: 50px;
}
.right{
flex-basis: 50px;
}
.mid{
flex-grow: 1;
}
</style>
</head>
<body>
<div class="con">
<div class="left">左左左</div>
<div class="mid">中中中</div>
<div class="right">右右右</div>
</div>
</body>
