使用 flex 布局处理 左面图 右文字的需要注意的css问题

.bottom-pay__tips {
  width: 100%;   //默认百分百
  height: 22px;
  font-size: 14px;  
  font-weight: 400;
  color: #333333;
  line-height: 22px;   //备注:如果使用flex 的话,默认会 根据内部的font-size默认的 进行自动line-height, 会和UI图产生一点点的差距
  display: flex;
  align-items: center;

  .tip-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

使用 flex 布局处理 左面图 右文字的需要注意的css问题

解决措施 1.手动在flex里面 严格根据 ui的line-height 同步

2.不实用flex.

div{
  img,div(或者span)
}

div 外出取消flex 布局,
内部正常,需要把内部的div和span
1.设置成 dispaly:inline-block(为了在一行 添加宽高)
2.img默认会对其底部的文字极限。所以需要给img添加 virtiacl-aligin:top;
3.计算img的高度 和外层 div的总高度。计算差距 平分上下,写margin-top:xxx



 

 

使用 flex 布局处理 左面图 右文字的需要注意的css问题

上一篇:Android仿iPhone晃动撤销输入功能(微信摇一摇功能)


下一篇:golang net/http 实现 静态文件共享服务