[css]横並びにしたコンテンツの高さを合わせる方法

今回は、cssで横並びにしたコンテンツの高さを合わせる方法をご紹介したいと思います。

cssでブロックを横並びにするまではできたけど高さが合わないっていう時ありませんか？横の長さを合わせるのは簡単ですが縦方向のアプローチって難しいですよね。じゃあ横の長さに合わせて可変の縦ってjqueryなどで高さ取得してcssのheight書き換えないといけないの？ってなりますよね。そんなことはありません。cssのみで高さを合わせることはできます。
今回は、cssのみで横並びにしたコンテンツの高さを合わせて見たいと思います。

HTMLとCSSで横並びのものを作ってみよう

まずは、htmlとcssで横並びになってるものを作ってみようと思います。

サンプルコードと、実装例は次のようになります。

<style>
 .display_box{
  font-size:0;
 }
 .display_box .content{
   display:inline-block;
   vertical-align:top;
   width:30%;
   margin-left:1%;
  margin-right:1%;
  margin-bottom:50px;
  font-size:16px;
  border:1px solid #ccc;
  box-sizing:border-box;
  padding:30px;
 }
</style>
<div class="display_box">
  <div class="content">
   HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
  </div>
  <div class="content">
   HTMLとCSSで横並びにします。
  </div>
 <div class="content">
   HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
  </div>
</div>

display:inline-blockを使って横並びにした場合

普通に横並びのものを使用すると、このように高さの合わないブロックが並んでしまいます。

HTMLとCSSで作った横並びのものの高さを揃えてみよう

次はこのようなブロックをどうやって、高さを合わせるのかについてご紹介したいと思います。先ほどはdisplay:inline-blockを持たせることで横並びを実現しました。その場合は、高さを合わせることは難しくなります。今回は、display:flexを親要素に持たせることで簡単に高さを合わせることができます。

サンプルコードと実装例は次のようになります。

<style>
 .flex_box{
  font-size:0;
  display:flex;
   display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
 }
 .flex_box .content{
   width:30%;
   margin-left:1%;
  margin-right:1%;
  margin-bottom:50px;
  font-size:16px;
  border:1px solid #ccc;
  box-sizing:border-box;
  padding:30px;
 }
</style>
<div class="flex_box">
  <div class="content">
   HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
  </div>
  <div class="content">
   HTMLとCSSで横並びにします。
  </div>
 <div class="content">
   HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。HTMLとCSSで横並びにします。
  </div>
</div>

display:flexを使って見た場合

上記のように、横並びのコンテンツの高さが一番高いものに合うようになりましたね。このようにdisplay:flexを使うことで高さを揃えることができますのでぜひ使って見てください。

まとめ

今回はcssで横並びにしたコンテンツの高さをどうやって合わせるのかといった方法をご紹介させていただきました。コンテンツを横に並べる際に高さを合わせることで、見やすさもアップしますよね。