需求:如下图。左边文字居中显示,高度自适应右边。
解决:
<div class="box">
<div class="left">
<p class="left-p">左边文字</p>
</div>
<div class="right"></div>
</div>
.box{
width: 200px;
background-color: black;
position:relative;
}
.left{
position:absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
background-color: #f6f9fb;
display: flex;
flex-direction: column;
justify-content: center;
}
.left-p{
width: 100%;
text-align: center;
}
.right{
background-color: #409EFF;
height: 200px;
margin-left: 100px;
}
回顾失败:左定宽,右自适应的时候用的是浮动(如以下代码),结果为如下显