【横並びのボックスの高さを揃える方法】
divタグなど、CSSのdisplayプロパティがボックスタイプに分類されるタグは
基本的に縦に並びます。
それを横に並べたいとき、CSSで float:left; を使うのは常套手段ですが、
float には横に配置するという役目しかありません。
そのため、並べたボックスの高さが違うと下の段にあるボックスを
押し下げてしまい、綺麗に並ばないことがあります。
そこで２つの解決法をご紹介します。
＜方法１＞
float を使わず、display: table-cell; を使う。
＜方法２＞
jQueryのプラグインを酌み込んで一番高いボックスに自動で高さを揃える。
ozpa-h4.com
どちらが良いというものではありません。
どちらも本質的には同じことです。
table-cellはテーブルタグの td と同様の描画（レンダリング）方法を
ブラウザに指示する役目があります。
td は「セル」ですから、横並びの全てのセルが同じ高さになるよう
描画してくれるというわけです。
一方、プラグインを使う方法では、プログラムによってボックスの高さを調べ、
一番高さが大きいものを見つけ出し、一律で style="height:●●px" のように
CSSで高さを強制的に指定します。
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。
