先来看一下最终效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
height:200px;
background:#ccc;
margin-bottom:10px;
}
.con_l,.con_r{
width:200px;
height:80%;
}
.con_l{
background:plum;
}
.con_r{
background:saddlebrown;
}
.con_c{
height:100%;
background:slateblue;
}
/* 1. float + bfc */
.con1_l{
float:left;
}
.con1_r{
float:right;
}
.con1_c{
overflow: hidden;
}
/* 2. float + padding*/
.con2_l{
float:left;
}
.con2_r{
float:right;
}
.con2_c{
padding:0px 200px;
}
.con2_c_con{
height:100%;
background:teal;
}
/* 3 float + margin */
.con3_l{
float:left;
}
.con3_r{
float:right;
}
.con3_c{
margin:0px 200px;
}
/* 4 position */
.con4{
position:relative;
}
.con4_l{
position:absolute;
}
.con4_r{
position:absolute;
right:0px;
}
.con4_c{
margin:0px 200px;
}
</style>
</head>
<body>
<!-- 1、float + bfc -->
<div class="con">
<div class="con_l con1_l">左侧左侧左侧左侧左侧左侧</div>
<div class="con_r con1_r">右侧右侧右侧右侧右侧右侧</div>
<div class="con_c con1_c">中间中间中间中间中间中间</div>
</div>
<!-- 2 float + padding-->
<div class="con">
<div class="con_l con2_l">左侧左侧左侧左侧左侧左侧</div>
<div class="con_r con2_r">右侧右侧右侧右侧右侧右侧</div>
<div class="con_c con2_c">
<div class="con2_c_con">中间中间中间中间中间中间</div>
</div>
</div>
<!-- 3、float + margin -->
<div class="con">
<div class="con_l con3_l">左侧左侧左侧左侧左侧左侧</div>
<div class="con_r con3_r">右侧右侧右侧右侧右侧右侧</div>
<div class="con_c con3_c">中间中间中间中间中间中间</div>
</div>
<!-- 4、position -->
<div class="con con4">
<div class="con_l con4_l">左侧左侧左侧左侧左侧左侧</div>
<div class="con_r con4_r">右侧右侧右侧右侧右侧右侧</div>
<div class="con_c con4_c">中间中间中间中间中间中间</div>
</div>
</body>
</html>
没有写太多的原理,看不懂的话,可以看上一篇文章,《css 8种方法实现 左侧固定右侧自适应》,链接:https://blog.csdn.net/Charissa2017/article/details/103840885