<style>
//父盒子样式 开启弹性布局,设置两端对齐
.box{
/* overflow: hidden; */
display: flex;
justify-content: space-between;
}
//设置同一高度
.box, .rt ,.lt, .main {
height: 500px;
}
//左边盒子设宽 ,背景色
.lt{
width:400px;
background-color: red;
}
//右边盒子设宽 ,背景色
.rt{
width:400px;
background-color: orange;
}
//宽。自动 剩余空间
.main{
width:auto;
flex: 1;
background-color: blueviolet;
}
</style>
<body>
<div class="box"> //父盒子
<div class="lt"></div> //左边盒子
<div class="main"></div> //中间盒子
<div class="rt"></div> //右边盒子
</div>
</body>