【css】横並びボックスの高さを合わせる｜テキスト量が違うケース

文章量に差があるカラムを横並びさせる時、その高さを合わせる指定を行っていきます。

それでは、さっそく解説にいきましょう。

横並びボックスの高さを合わせる

実現したいのは、以下のようなことです。

こっちはテキストが多めかもしれません。

こっちは少なめです。

テキスト量の違うボックスが横並びしていますが、高さは揃っています。

これには、flexとinline-blockを使ったやり方があります。

1つ目はflexを使ったやり方。

<ul>
  <li>こっちはテキストが多めかもしれません。</li>
  <li>こっちは少なめです。</li>
</ul>

ul {
  display: flex;
  justify-content: space-between;　/* <li>を両端に配置 */
}
li {
  width: 48%; /* ボックス間に余白を設けるため*/
  border: solid 1px #e5e5e5;
}

こっちはテキストが多めかもしれません。

こっちは少なめです。

<ul>にdisplay: flexと指定すれば、自動で<li>の高さを合わせてくれます。

これだけです。

レスポンシブにも対応できるので、とても使い勝手がいいです。

※flexについては、『Webクリエイターボックス』さんのFlexboxチートシートがとても分かりやすいですよ。

2つ目はinline-blockを用います。

<ul>
  <li>こっちはテキストが多めかもしれません。</li>
  <li>こっちは少なめです。</li>
</ul>

li {
  display: inline-block;
  width: 48%; /* ボックス間に余白を設けるため*/
  border: solid 1px #e5e5e5;
}

こっちはテキストが多めかもしれません。

こっちは少なめです。

<ul>ではなく、<li>にdisplay: inline-blockと指定します。

ご覧のように、横並びさせただけでは高さが揃わないため、heightを指定する必要があります。

というわけで、<li>にheight: 90pxと追記。

こっちはテキストが多めかもしれません。

こっちは少なめです。

ですが、このようにズレてしまいます。

これはテキスト量の違いから発生するようです。

修正するには<li>のvertical-align: top か bottomとしましょう。

こっちはテキストが多めかもしれません。

こっちは少なめです。

ただ、こちらは<li>の幅が変化すれば高さも変わるため、@mediaを使ってレスポンシブ対応させる記述が必要です。

この記事は、CSS3をもとに書きました。

CSS3はcssのルールブックみたいなもので、その最新版です。

やや専門家向けなので、お時間ある方だけチラッとご覧くださいー

レスポンシブなどの面から考えて、まずはflexを選択し、うまくいかなかったらinline-blockを使うといいかもしれません。