同行设置两个（若干）inline-block元素，位置偏移问题

这两天在公司写前端，一直在搞数据可视化相关方面，一直在弄大屏展示，其中就需要把两个（多个）div放置到一行上，结果我放置之后发现第二个div把第一个div挤下去了（后来发现并不是这么回事）

首先先贴出我的代码
HTML

<div class="disease-choose">
	<div class="disease-choose-title titles">
		疫病筛选
	</div>
	<div class="disease-choose-table divs">
	
	</div>
</div>
<div class="map-show">
</div>

CSS

 .disease-choose{
 height: 40%;
 width: 19%;
 display: inline-block;
}
.map-show{
 height: 50%;
 width: 38%;
 background-color: white;
 display: inline-block;
 margin-left: 1%;
}

效果图：
但是当白色区域有了文字之后就又另当别论了

后来发现，原来是左侧的div的文字和右侧div的文字是保持对齐的（所以并不是后面的div把前面的div顶下来了），当右面div没有文字时，则对齐他的最后一行，这是因为行内元素的vertical-align默认是baseline，对于baseline的理解，找到了一个博客，比较详细（也比较乱2333） 传送门
最后，通过设置div的vertical-align属性为top完美解决

  .disease-choose{
    height: 40%;
    width: 19%;
    display: inline-block;
    vertical-align: top;
  }
  .map-show{
    height: 50%;
    width: 38%;
    background-color: white;
    display: inline-block;
    margin-left: 1%;
    vertical-align: top;
  }

理论上只需要改 .disease-choose 就行了，但是担心后面会对div有改动，出现一些奇奇怪怪的问题，我就都加上了

最后，感觉自己的前端还是比较菜的，还是要多加学习啊。自己的第一篇博客就当成一个笔记练手了