今天同事用inline-block进行布局时,两个等高的div出现了错位,如下图:
于是我写了个直观的示例讲解给她,非常一目了然,顺便在这边详细记录一下这个问题。
元素的垂直对齐方式vertical-align默认值为baseline(基线),如下图蓝色基准线:
对应到最上面的布局的基线为下图:
所以只需要在两个元素上设置vertical-align:top即可
也可以换float或flex布局实现行内布局。
今天同事用inline-block进行布局时,两个等高的div出现了错位,如下图:
于是我写了个直观的示例讲解给她,非常一目了然,顺便在这边详细记录一下这个问题。
元素的垂直对齐方式vertical-align默认值为baseline(基线),如下图蓝色基准线:
对应到最上面的布局的基线为下图:
所以只需要在两个元素上设置vertical-align:top即可
也可以换float或flex布局实现行内布局。