1. 使用浮动float，左右分别左浮动和右浮动，中间元素设置margin实现自适应
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
<!-- center未脱标，如果标签放在中间，会把right挤到下一行 -->
<div class="center">中间</div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 300px;
background-color: pink;
}
.left {
float: left;
width: 100px;
height: 300px;
background-color: green;
}
.center {
height: 300px;
margin-left: 100px;
margin-right: 100px;
background-color: skyblue;
}
.right {
float: right;
height: 300px;
width: 100px;
background-color: gold;
}
</style>
2. 使用定位position
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="center">中间</div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.box {
position: relative;
width: 500px;
height: 300px;
background-color: pink;
}
.left {
position: absolute;
left: 0;
width: 100px;
height: 300px;
background-color: green;
}
.center {
position: absolute;
left: 100px;
right: 100px;
height: 300px;
background-color: skyblue;
}
.right {
position: absolute;
right: 0;
height: 300px;
width: 100px;
background-color: gold;
}
</style>
3. flex布局
<div class="box">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.box {
display: flex;
width: 500px;
height: 300px;
background-color: pink;
}
.left {
width: 100px;
background-color: green;
}
.center {
flex: 1;
background-color: skyblue;
}
.right {
width: 100px;
background-color: gold;
}
</style>