要求：左右盒子宽度100px，中间自适应
1.position
<style>
.parent {
position: relative;
}
.child {
position: absolute;
}
.child:nth-child(1) {
width: 100px;
background-color: aqua;
left: 0;
}
.child:nth-child(2) {
background-color: yellow;
left: 100px;
right: 100px;
}
.child:nth-child(3) {
width: 100px;
background-color: blueviolet;
right: 0;
}
</style>
<div class="parent">
<div class="child">left</div>
<div class="child">center</div>
<div class="child">right</div>
</div>
2.display: flex;
<style>
.parent {
display: flex;
}
.child:nth-child(2) {
flex: 1;
}
</style>
- float
<style>
.parent {
overflow: hidden;
}
.child:nth-child(1) {
width: 100px;
background-color: aqua;
float: left;
}
.child:nth-child(2) {
background-color: yellow;
float: left;
width: calc(100% - 200px);
}
.child:nth-child(3) {
width: 100px;
background-color: blueviolet;
float: right;
}
</style>
<body>
<div class="parent">
<div class="child">left</div>
<div class="child">center</div>
<div class="child">right</div>
</div>
</body>
image.png
网友评论