css问题,顶部avatar和content没有对齐,为什么给avatar设置vertical-align:top就对齐了?

来源:16-5 外部组件(3)

christina976

2017-01-10

<div class="content-wrapper">
   <div class="avatar">
    <img src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg" alt="" width="64" height="64">
   </div>
     <div class="content">
        <div class="title">
            <span class="brand"></span> <span class="name">粥品香坊(回龙观)</span>
           </div> 
            <div class="description">
        蜂鸟专送 / 38分钟送达
           </div> 
            <div class="support">
                <span class="icon"></span> 
                <div class="text">在线支付满28减5</div>
            </div>
      </div>
</div>

老师的CSS:

.header .content-wrapper .avatar {
   display: inline-block;
   vertical-align: top;
}
.header .content-wrapper .content {
   display: inline-block;
   margin-left: 16px;
}


写回答

1回答

ustbhuangyi

2017-01-12

因为 2 个元素 dom 不一致,需要设置相同的基线才能对齐。

0
0

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程