inline-blockで上寄せさせたい時

はじめに

inline-blockで横並びさせる時、要素の高さがバラバラだと一番高い要素の下面に合わせて配置される。
上寄せさせたいため、その方法を記載する。

方法

inline-blockなのでvertical-alignが使用できる。
以下のように記載することで上寄せすることができる。

クラス名 {
  display: inline-block;
  vertical-align: 'top';
}

参考文献

developer.mozilla.org