直接上图、上代码.
<div class="father">
<div class="child1"> 左边固定宽度</div>
<div class="child2"> 右边宽度自适应
<br>
<H1>左边固定宽度、右边宽度自适应</H1>
</div>
<h1>方法1.父元素用相对定位relative，固定元素采用绝对定位absolute，脱离文档流。
所以给右边元素添加margin-left为固定的固定宽度。</h1>
</div>
<!-- 方法2 -->
<div class="big">
<div class="left">11111左边固定宽度200px</div>
<div class="right">22222 右边宽度自适应
<h1> 方法2.给父元素添加display：flex；触发弹性盒子<br>
父元素添加属性：flex-direction：row；从左边开始排列。</h1>
</div>
</div>
<!-- 方法3 -->
<div class="box">
<div class="aa">121313</div>
<div class="bb">5646548
<br>
<h1> 方法3.左边固定宽度的元素加浮动，<br>
右边自适应的元素加margin-left为固定的宽度。</h1>
</div>
</div>
.father{
width: 100%;
height: 200px;
position: relative;
background: wheat;
margin: 20px;
}
.child1{
width: 400px;
height: 50px;
position: absolute;
left: 0;
top: 0;
background: turquoise;
}
.child2{
margin-left: 400px;
background: violet;
height: 90px;
}
.big{
width: 100%;
height: 400px;
background: #ccc;
display: flex;
flex-direction: row;
}
.left{
width: 200px;
height: 200px;
background: orange;
}
.right{
width: 100%;
height: 300px;
background: pink;
/* float: left; */
}
.box{
width: 100%;
height: 300px;
background: #bbb;
margin-top: 50px;
}
.aa{
width: 100px;
background: tomato;
height: 200px;
float: left;
}
.bb{
height: 100px;
background: #ade;
margin-left: 100px;
}
</style>
