在一个div里面的两个span标签没有对齐,或者在一个div里面的两个div没有对齐

一、在一个div里面的两个span标签没有对齐,如下图红色圈所示

在一个div里面的两个span标签没有对齐,或者在一个div里面的两个div没有对齐_第1张图片

红色圈的html如下

{{seller.name}}

部分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里面的两个span标签没有对齐,或者在一个div里面的两个div没有对齐_第2张图片



二、在一个div里面的两个div没有对齐,下图中的左边是显示的效果,右边是代码结构

在一个div里面的两个span标签没有对齐,或者在一个div里面的两个div没有对齐_第3张图片

解决的方法还是在.avatar或者.content中设置对齐的方式,即vertical-align:top。

在.avatar或者.content中设置对齐的方式,即vertical-align:top之后,显示的效果.avatar和.content元素靠顶对齐了

在一个div里面的两个span标签没有对齐,或者在一个div里面的两个div没有对齐_第4张图片







你可能感兴趣的:(css)