質問: 以下の様なよくあるサンプルだと、添付イメージ1のように、各カラムの高さが同一に書かれる事が多いと思います。 ``` ヘッダー メニュー 内容 広告とか フッター ``` 実際にページを作っていくと、普通は各カラムの高さは異なるので、イメージの2のようにそれぞれ段違いになると思います。 しかし、背景色やイメージを使う場合、高さが揃わないと締まりがありません。 よくある「ボックスの高さをそろえるjQuery」を使いまして、3のようにひとまず高さをそろえることはできたのです。 が、しかし。 ブラウザの幅を縮めて縦配置になった時に、各カラムの幅が同じなので、4のようにメニューのカラムなどの余白が残ってしまい残念なレイアウトになってしまいます。 縦配置の時は5のようにカラムの内容に合わせて、 横配置の時だけ3のように揃える方法はないものでしょうか。 !レイアウトの例
回答: ちょうど「ウィンドウ幅が一定以上の時だけ高さを揃える」機能を持ったプラグインがあるようです。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 - to-R 余談ですが、`display: table-cell` で高さを揃えた横並びにしておいて、MediaQueryで切り替えるようにすれば、CSSだけでもできそうです。(Bootstrapのカラムは `float` を使っているので、だいぶ手法が変わってしまいますが)