jQueryプラグイン「jquery.heightLine.js」のデモ
Demo 00: 何もしていない状態
白背景のブロック(h3見出しの親要素)はflexboxとheight:100%;で高さが揃っていますが、h3見出しは文字数に準拠しているため高さがそれぞれ異なっています。
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
Demo 01: h3見出しの高さを揃えています。
#section01 h3に該当する要素が全て高さが揃いました。
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
Demo 02: class指定で高さを揃えています。
.heightLineを付加した前二つのh3の高さが揃いました。
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
Demo 03: ブレイクポイント設定(768px以上で高さ揃え)
ブラウザ幅を伸び縮みさせてみてください。
768pxまでは白背景の親要素が横並び3カラムでh3の高さが揃っていますが、767pxからは親要素が縦1列になりh3の高さ揃えは解除となります。
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
Demo 04: ブレイクポイント設定(767px以下で高さ揃え)
ブラウザ幅を伸び縮みさせてみてください。
Demo 03とは逆にブラウザ幅767px以下でh3の高さが揃います。縦1列になったときに高さ揃えする必要があるかどうかはともかく。
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト
見出しダミーテキスト
ダミーテキストダミーテキストダミーテキスト