zoukankan      html  css  js  c++  java
  • 同一DIV内,两个行内块元素不对齐的解决方案

    这个跟基线对齐有关系,如果你给写文字的那个span设置一个vertical-align:top,就可以对齐,具体原因如下:
    从CSS2的可视化格式模型文档中可以看到:
    inline-block的基线是正常流中最后一个line box的基线,除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible,这种情况下基线是margin底边缘。
    举例:

    <style>
        .dib-baseline{
            display: inline-block;
             150px;
            height: 150px;
            border: 1px solid #cad5eb;
            background-color: #f0f3f9;
            margin-top: 20px;
        }
    </style>
    <span class="dib-baseline"></span>
    <span class="dib-baseline">dib-baseline</span>

    运行结果:


    因为前面的盒子没有任何字符,此时它的基线就是它的底边缘,后面的盒子有文字,所以该盒子的基线就是文字的基线,二者基线对齐,现成如此效果。
    如果把第二个盒子line-height:0,此时文字基线的位置,就是文字的垂直中心,所以: 

    这就是为什么出现这个问题的原因,通过改变对齐方式可以达到对齐。
    具体关于vertical-align的讲解可以看看张鑫旭老师的CSS深入理解之vertical-align

  • 相关阅读:
    Android笔记:数据储存
    Android笔记:管理所有活动
    Android随笔:属性
    Android笔记:限定符
    Android笔记:ninepatch
    Android笔记:获取屏幕信息
    js自动完成
    动态生成实体类
    EF框架学习手记
    js遮罩效果
  • 原文地址:https://www.cnblogs.com/qfly/p/8085125.html
Copyright © 2011-2022 走看看