版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zch3210/article/details/86636324
左右定宽，中间自适应
（1） 使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left,.right{
position: absolute;
width: 100px;
height: 100px;
background-color: #d7d4f0;
}
.left{
left: 0;
}
.right{
right: 0;
}
.center{
margin:0 100px 0 100px;
height: 100px;
background-color: #2aa198;
}
</style>
</head>
<body>
<div>
<div class="left">
左侧定宽
</div>
<div class="right">
右侧定宽
</div>
<!--放在最后，写在中间没有效果-->
<div class="center">
中间自适应
</div>
</div>
</body>
</html>效果图如下：
（2）使用左右两栏使用float属性，中间栏使用margin属性进行撑开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left,.right{
width: 100px;
height: 100px;
background-color: #d7d4f0;
}
.left{
float: left;
}
.right{
float: right;
}
.center{
margin: 0 100px;
height: 100px;
background-color: #2aa198;
}
</style>
</head>
<body>
<div>
<div class="left">
左侧定宽
</div>
<div class="right">
右侧定宽
</div>
<!--放在最后，写在中间没有效果-->
<div class="center">
中间自适应
</div>
</div>
</body>
</html>效果图如下：
（3）margin负值法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left{
position: relative;
float: left;
width: 100px;
height: 100px;
margin-right: -100px;
background-color: #0baae4;
}
.center{
float: left;
width: 100%;
height: 100px;
background-color: #A8A297;
}
.right{
position: relative;
float: right;
width: 100px;
height: 100px;
margin-left: -100px;
background-color: #0baae4;
}
p{
margin:0 100px 0 100px;
background-color: #2aa198;
}
</style>
</head>
<body>
<div>
<div class="left">
左侧定宽
</div>
<div class="center">
<p>中间自适应</p>
</div>
<div class="right">
右侧定宽
</div>
</div>
</body>
</html>效果图如下：
（4） flex法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bj{
display: flex;
}
.left,.right{
width: 100px;
height: 100px;
background-color: #d7d4f0;
}
.center{
width: 100%;
height: 100px;
background-color: #2aa198;
}
</style>
</head>
<body>
<div class="bj">
<div class="left">
左侧定宽
</div>
<div class="center">
中间自适应
</div>
<div class="right">
右侧定宽
</div>
</div>
</body>
</html>效果图如下：
左侧，中间定宽，右侧自适应
margin负值法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left{
position: relative;
float: left;
width: 100px;
height: 100px;
background-color: #A8A297;
}
.center{
position: relative;
float: left;
width: 100px;
height: 100px;
background-color: #0baae4;
}
.right{
float: right;
width: 100%;
height: 100px;
background-color: #d7d4f0;
margin-left: -200px;
}
p{
margin: 0 0 0 200px;
background-color: #2aa198;
}
</style>
</head>
<body>
<div>
<div class="left">
左侧定宽
</div>
<div class="center">
中间定宽
</div>
<div class="right">
<p>右侧自适应</p>
</div>
</div>
</body>
</html>效果图如下：
