
文章量に差があるカラムを横並びさせる時、その高さを合わせる指定を行っていきます。
それでは、さっそく解説にいきましょう。
横並びボックスの高さを合わせる
実現したいのは、以下のようなことです。
こっちはテキストが多めかもしれません。
こっちは少なめです。
テキスト量の違うボックスが横並びしていますが、高さは揃っています。
これには、flex
とinline-block
を使ったやり方があります。
flexを使う
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チートシートがとても分かりやすいですよ。
inline-blockを使う
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
を使うといいかもしれません。