一、在一个div里面的两个span标签没有对齐,如下图红色圈所示
红色圈的html如下
<div class="title">
<span class="brand"></span>
<span class="name">{{seller.name}}</span>
</div>
部分css如下
.title
margin:2px 0 8px 0
.brand
display: inline-block /*span是inline元素,需设置成inline-block/block,设置width/height才能生效*/
width:30px
height:18px
bg-image('brand')
background-size :30px 18px
background-repeat :no-repeat
.name
font-size:16px
margin-left:6px
font-weight:bold
line-height:18px
要想让.brand和.name对齐,只需要在.brand或者.name中设置对齐方式:vertical-align:top,就ok了
更改后的css代码如下:
.title
margin:2px 0 8px 0
.brand
display: inline-block /*span是inline元素,需设置成inline-block/block,设置width/height才能生效*/
width:30px
height:18px
bg-image('brand')
background-size :30px 18px
background-repeat :no-repeat
vertical-align:top
.name
font-size:16px
margin-left:6px
font-weight:bold
line-height:18px
显示效果如下:
二、在一个div里面的两个div没有对齐,下图中的左边是显示的效果,右边是代码结构
解决的方法还是在.avatar或者.content中设置对齐的方式,即vertical-align:top。
在.avatar或者.content中设置对齐的方式,即vertical-align:top之后,显示的效果.avatar和.content元素靠顶对齐了
原文地址:https://blog.csdn.net/tangxiujiang
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。