1、布局概述
中間固定惨远，兩邊自適應(yīng)布局谜悟，這是一種非常罕見的布局。例如下圖北秽，測(cè)試劇中葡幸，這幾個(gè)字固定寬度，左右的紅線根據(jù)屏幕自適應(yīng)贺氓。
image.png
2蔚叨、實(shí)現(xiàn)思路1- 浮動(dòng)加負(fù)邊距
實(shí)現(xiàn)思路
（1） 創(chuàng)建左中右3個(gè)div。
（2）左邊div各占50%寬度;左邊div的左邊負(fù)邊距辙培，設(shè)置為中間div寬度的一半蔑水。
（3）右邊div各占50%寬度;右邊div的右邊負(fù)邊距，設(shè)置為中間div寬度的一半扬蕊。
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中間固定寬度搀别，兩邊自適應(yīng)布局-浮動(dòng)加負(fù)邊距</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.wrap{
overflow: hidden;
margin-top: 20px;
}
.center{
width: 70px;
text-align: center;
float: left;
}
.left{
line-height: 30px;
height: 30px;
float: left;
width: 50%;
margin-left: -35px;
}
.right{
line-height: 30px;
height: 30px;
float: right;
width: 50%;
margin-right: -35px;
}
hr{ height:1px;border:none;border-top:1px solid red;}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<hr style="margin-top: 14px;">
</div>
<div class="center">測(cè)試居中</div>
<div class="right">
<hr style="margin-top: 14px">
</div>
</div>
</body>
</html>
運(yùn)行效果：
image.png
刪除中間div后，運(yùn)行效果：
image.png
3尾抑、實(shí)現(xiàn)思路2-彈性合作模型
實(shí)現(xiàn)思路:
（1） 創(chuàng)建左中右3個(gè)div歇父。
（2） 設(shè)置負(fù)div為彈性盒子模型。
（3） 設(shè)置左右div的flex-grow 為1 蛮穿。
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中間固定寬度庶骄，兩邊自適應(yīng)布局-彈性盒子模型</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.wrap{
display: flex;
flex-direction: row;
margin-top: 20px;
}
.center{
width: 70px;
text-align: center;
}
.left,.right{
flex-grow: 1;
line-height: 30px;
height: 30px;
}
hr{ height:1px;border:none;border-top:1px solid red;}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<hr style="margin-top: 14px">
</div>
<div class="center">測(cè)試劇中</div>
<div class="right">
<hr style="margin-top: 14px">
</div>
</div>
</body>
</html>
4、實(shí)現(xiàn)類似顯示效果践磅。
如果只實(shí)現(xiàn)類似的顯示效果单刁。另外一種實(shí)現(xiàn)思路。
（1） 設(shè)置div 的行高為1px府适。
（2） 設(shè)置div 的左邊框羔飞、右邊框 寬度為1px solid red;
（3 ） 方案缺點(diǎn)： 不能左右自動(dòng)適應(yīng)，只能應(yīng)用固定寬度的需求檐春。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過(guò)高度為1px,設(shè)置左右邊框?qū)拰?lt;/title>
<style type="text/css">
.wrap{
width: 500px;
}
.nav{
text-align: center;
border-left : 200px solid red;
border-right: 200px solid red;
line-height : 1px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav">測(cè)試劇中</div>
</div>
</body>
</html>
