三列布局問題隶症，即左右寬度固定奕坟，中間自適應本橙；
提供三種方案：
- 絕對定位 + 中間板塊不給寬度
- 兩側浮動 + 中間自動撐開
- 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; 使用這句觸發(fā)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>
