1、布局概述
中间固定，两边自适应布局，这是一种非常罕见的布局。例如下图，测试剧中，这几个字固定宽度，左右的红线根据屏幕自适应。
image.png
2、实现思路1- 浮动加负边距
实现思路
（1） 创建左中右3个div。
（2）左边div各占50%宽度;左边div的左边负边距，设置为中间div宽度的一半。
（3）右边div各占50%宽度;右边div的右边负边距，设置为中间div宽度的一半。
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中间固定宽度，两边自适应布局-浮动加负边距</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">测试居中</div>
<div class="right">
<hr style="margin-top: 14px">
</div>
</div>
</body>
</html>
运行效果：
image.png
删除中间div后，运行效果：
image.png
3、实现思路2-弹性合作模型
实现思路:
（1） 创建左中右3个div。
（2） 设置负div为弹性盒子模型。
（3） 设置左右div的flex-grow 为1 。
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中间固定宽度，两边自适应布局-弹性盒子模型</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">测试剧中</div>
<div class="right">
<hr style="margin-top: 14px">
</div>
</div>
</body>
</html>
4、实现类似显示效果。
如果只实现类似的显示效果。另外一种实现思路。
（1） 设置div 的行高为1px。
（2） 设置div 的左边框、右边框 宽度为1px solid red;
（3 ） 方案缺点： 不能左右自动适应，只能应用固定宽度的需求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过高度为1px,设置左右边框宽宽</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">测试剧中</div>
</div>
</body>
</html>
网友评论