CSS处理文本上下、左右居中的方法,以及最右边列自动适应

1、显示效果


2、案例代码

<div class="container">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>


<style>
.container{
border:1px dotted red;
width:100%;
height:40px;
display:flex;
margin:0px;
padding:5px;

}
.left{
width:200px;
height:40px;
background-color:gray;
flex:none;
text-align:center;
line-height:40px;
}
.center{
background-color:red;
width:100px;
text-align:center;
line-height:40px;
flex:none;
}
.right{
heigth:40px;
background-color:green;
flex:1;
text-align:right;
line-height:40px;
}
</style>

猜你喜欢

转载自blog.csdn.net/newsky_heart/article/details/79757477