要点:1.设置弹性盒模型
2.text-align:center 设置元素中的文本对齐方式
3.line-height=height 设置元素中文本的行高
效果图如下
下面相应的是html代码
<div class="main">
<div class="left">
<div class="left_header_title"><span>title</span></div>
<div class="left_header_body"></div>
</div>
<div class="right">
<div class="right_header_title"></div>
<div class="right_header_body"></div>
</div>
</div>
下面相应的是css代码
.main{
display: flex;
margin-left: 50px;
margin-right: 300px;
}
.left{
height: 300px;
width: 500px;
background-color: white;
display: flex;
border:solid 1px rgb(136, 152, 182);
}
.left_header_title{
height: 30px;
width: 50px;
background-color: rgb(68, 151, 156);
line-height: 30px;
text-align: center;
}
.left_header_body{
height: 30px;
flex-grow: 1;
background-color: rgb(143, 141, 139);
}
.right{
height: 300px;
flex-grow: 1;
background-color: white;
display: flex;
margin-left: 20px;
border: solid 1px rgb(136, 152, 182);
}
.right_header_title{
height: 30px;
width: 50px;
background-color: rgb(68, 151, 156);
}
.right_header_body{
height: 30px;
flex-grow: 1;
background-color: rgb(143, 141, 139);
}