主体部分用 main
标签包裹。
<main>
<div class="adrInfo">
<div><i class="iconfont icon-location"></i></div>
<div class="userInfo">
<p> <span class="name">张三</span>19931432434</p>
<p>上海市翻斗花园123号楼44层 401室</p>
</div>
<a href="#" class="more"><i class="iconfont icon-more"></i></a>
</div>
</main>
样式:
/* 订单页面主体样式 */
main{
padding: 10px 10px 90px;
}
main>div{
background-color: #fff;
border-radius: 3px;
margin-bottom: 10px;
padding: 10px;
}
/* 订单页面收货信息模块 */
/* 整个盒子开启flex圣杯布局 */
.adrInfo{
display: flex;
justify-content: space-between;
}
/* 里面的第一个盒子装地址图标 */
.adrInfo div:nth-child(1){
background-color: rgb(0, 190, 127);
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: #fff;
}
/* 第二个盒子开启宽度自适应 */
.adrInfo div:nth-child(2){
flex: 1;
margin-left: 20px;
}
/* 更多按钮 */
.adrInfo .more{
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
text-decoration: none;
color: black;
}
/* 收获用户信息 */
.adrInfo .name{
font-size: 19px;
margin-right: 10px;
}
/* 收获用户信息地址 */
.adrInfo .userInfo p:nth-child(2){
margin: 10px 0px;
line-height: 25px;
}
效果: