行内块元素的对齐

行内块元素的对齐

场景

今天在工作的时候想要将盒子对齐，将div设置成了inline-block，结果盒子并没有对齐

    <div class="box">

      <div class="first child"></div>

      <div class="second child">2</div>

      <div class="third child"></div>

    </div>

样式：

      .box {
        border: 2px solid skyblue;
        height: 200px;
      }

      .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin-right: 10px;
      }

      .first {
        background-color: green;
      }
      .second {
        background-color: purple;
      }

      .third {
        background-color: orange;
      }

结果并没有对齐： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

原因

我们知道，行内块元素默认对齐方式是基线对齐 verticle-align:base-line

对于一个inline-block行内块元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘

上面例子绿色和黄色盒子的基线是他们的底边，紫色盒子的基线由数字2决定了，所以他们基线对齐之后就乱了

解决方法

方法1：加 verticle-align: top / middle / bottom**

给盒子加上verticle-align就好了

 .child {
        vertical-align: top;
      }

方法2：添加浮动：float ，只是浮动脱离标准流，不那么好控制**

 .child { float: left}

方法3: 添加内容（字符串等内容）容就好

，不那么好控制**

 .child { float: left}

方法3: 添加内容（字符串等内容）容就好