1.左右布局
html部分： <section class="clearfix">
<div class="right"></div>
<div class="left"></div>
</section>
css部分： section .right{
float: left;
width: 60px;
height: 60px;
border: 1px solid red;
}
section .left{
width: 60px;
height: 60px;
border: 1px solid blue;
float: left;
}
2.左中右布局
html部分：<section class="zzy">
<div class="right"></div>
<div class="middle"></div>
<div class="left"></div>
</section>
css部分：.zzy{
display: flex;
}
.zzy .left{
width: 100px;
height: 70px;
background: green;
}
.zzy .middle{
width: 100%;
background: red;
margin: 20px 0;
}
.zzy .right{
width: 100px;
height: 100px;
background: yellow;
}
3 水平居中
text-align = center;
4 垂直居中
display: flex;
justify-content:center;
align-items:Center;
网友评论