一、浮动布局（float）
<div class="parent">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
.parent {
width: 100%;
height: 200px;
}
.right {
float: right;
background: #00b3ee;
height: inherit;
width: 300px;
}
.left {
height: inherit;
float: left;
background: #eee789;
width: 300px;
}
.center {
height: inherit;
background: #7b007b;
}
注意：不要把right和center两个容器的位置放反了。
二、绝对定位实现
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.parent {
position: relative;
width: 100%;
height: 200px;
}
.left {
position: absolute;
width: 200px;
background: #007bff;
height: 200px;
}
.center {
position: absolute;
background: #7b007b;
height: 200px;
left: 200px;
right: 200px;
}
.right {
right: 0;
position: absolute;
width: 200px;
background: yellow;
height: 200px;
}
三、flex布局
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.parent > *{
height: 200px;
}
.parent {
width: 100%;
height: 200px;
display: flex;
}
.left {
background: yellow;
width: 300px;
}
.center {
background: #7b007b;
flex: 1;
}
.right {
background: #00aa88;
width: 300px;
}