0

横並びにしたブロック要素の高さを揃えたい!

横並びにした要素の高さを揃えたい!

横並びに配置したコンテンツが、中身の高さ(画像の大きさやテキストの長さ)によって、バラバラになってしまうことってありませんか?

そんな場合には、コンテンツ内の要素に関係なく一番高さを取っている要素に合わせて、下のラインを揃えてくれる方法があります。言葉で説明してもわかりにくいと思うので下の画像を見てみてください。

img0

「タイトル1」の要素と「タイトル2」の要素で、中身にあたる文章が長い時と短い時で、背景の白い部分が短くなってしまうという問題になります。

これを、中身の長さに関わらずピッタリと揃えたいな~ってことですね。

それでは見ていきましょう。




まずは、サンプルとしてHTMLを用意しました。

HTML

ここに基本的なCSSを指定しています。

CSS

img1

▼こちらをブラウザで確認するとこのようになります。

DEMO1

短い文章の背景が下まで届かずに、要素の下のラインがバラバラになってしまっています。

この要素をきっちりと揃えてくれるのが「to-R」さんが配布している「heightLine.js」です。

heightLine.jsをダウンロードして読み込む

heightLine.jsの置き場所は、任意で決めてください。サンプルでは「js/フォルダの中」に配置しています。

方法1

揃えたいブロックレベル要素に「heightLine」というクラス名を付けます。

※サンプルで言うところの<p>タグにあたりますね。

HTML

img2

確認してみましょう。

DEMO2

このようになります。

方法2

方法1でも問題はありませんが、ある要素だけ独立して内容が長くなってしまうと、それに合わせて全ての要素が無駄に大きくなってしまうことが起こりえます。

どういうことかというと、下の画像を見てください。

img4

「タイトル5」にあたる部分の「長い文章。…」が長すぎる為に、上の段の「タイトル1」「タイトル2」「タイトル3」の下に無駄な空間が存在しています。この場合は、「上段」と「下段」で分けて考えたですよね。

このように、複数のグループに分けて高さを揃えたい場合には、

  • heightLine-group1
  • heightLine-group2
  • heightLine-group3

 

というように「heightLine」の後ろに「-(ハイフン)任意の名前」を付けることでグループ分けをしてくれるようになっています。

試しにやってみましょう。

HTML

「上段」「heightLine-group1」「下段」「heightLine-group2」としています。

すると、

img3

DEMO3

このように「上段」と「下段」で高さの違うラインで揃える事が出来るようになりました。

方法3

または、グループ分けをする必要がない場合であれば、親要素に対して「heightLineParent」というを書き加えれば、子要素が全て揃うようにも可能になっています。

HTML

DEMO4

いやぁ~便利ですね。

このように、ブロックレベル要素の高さが揃わなくて困ったときは、利用させて頂きたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 横並びにしたブロック要素の高さを揃えたい!