在display:inline-block的div中写入文本导致div脱离文档流

当在一个display属性为inline-block的div中放置文本时，会导致该div脱离原本的文档流，这里举个栗子

当两个display：inline-block的div都是空的时候，没有问题，两个div会并列布局，但当其中一个div内有文本的时候，



其原因是有些游览器对于设置了display：inline-block属性的容器会自动设置其vertical-align，使改div中的文字与相邻div底部对齐，经过尝试，可以重新设置其vertical-align,即设置vertical-align:top 便可以使div恢复对齐。