1，弹性盒（flex）布局
中间 .center 区域设置 flex-grow: 1 或者 width: 100%
.container {
width: 100%;
min-height: 200px;
background-color: red;
display: flex;
}
.container .left {
width: 200px;
height: 200px;
background-color: purple;
}
.container .right {
width: 150px;
height: 200px;
background-color: blue;
}
.container .center {
/* flex-grow: 1; */
width: 100%;
height: 200px;
background-color: orange;
}
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
2, 利用浮动（注意div排版的结构）
.container{
width: 100%;
/* background-color: green;
min-height: 500px; */
}
.left{
width: 200px;
height: 300px;
background-color: pink;
float: left;
}
.right{
width: 150px;
height: 300px;
background-color: purple;
float: right;
}
.center{
height: 300px;
margin-left: 200px;
margin-right: 150px;
background-color: blue;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
3，定位 （注意div排版的结构）
.container {
width: 100%;
position: relative;
}
.left {
width: 200px;
height: 300px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
position: absolute;
}
.right {
width: 150px;
height: 300px;
background-color: purple;
position: absolute;
top: 0;
right: 0;
}
.center {
height: 300px;
margin-left: 200px;
margin-right: 150px;
background-color: blue;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
4, 双飞翼布局
left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#container {
overflow: hidden;
}
#left,
#right,
#center {
float: left;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
margin: 0 150px 0 200px;
}
<div id="container">
<div id="center">
<div class="content">#center</div>
</div>
<div id="left">#left</div>
<div id="right">#right</div>
</div>
