css样式 - 使用display: inline-block;布局时错位问题

在页面中我们经常会左右布局。左边宽度固定右边宽度布满整个盒子比如这样的 

    .content_module {
      height: calc(100% - 0.8rem);
      /*padding: .15rem .5rem .5rem;*/
      .modal_box_left {
        display: inline-block;
        width: 1.88rem;
        height: 100%;
        background: #0BB9FF;
      }
      .modal_box_right {
        display: inline-block;
        width: calc(100% - 1.98rem);
        background: red;
        height: 100%;
      }
    }

上面的样式是我们理想的情况但是事实上样式确实这样的

我很纠结为什么会出现这样的问题，从网上搜索了很多终于找到解决问题的方法：加上 vertical-align: top; 属性就可以了。具体为什么会有这种问题我到现在也没有弄清楚不过幸好是解决了。不然只能用浮动也做这个效果了。网上很多这样的案例都推荐使用浮动效果来做这样的效果，不过使用浮动确实要好一点。这里就不做评价了，看个人的喜好了。