フリーランスが営業なしで受注する方法5つ

floatで複数要素の高さがずれる場合に揃える方法はdisplay:table;

floatで複数の要素を横並びにした場合に高さが揃わない場合の解決策を簡単な順にお伝えします。

floatで複数要素の高さがずれる問題

例えば3つの要素を横並びにした場合、ある要素だけ高さが短い場合の対処法です。これはコンテンツの中身に大きさ(多さ)によって高さが決まっているために起こる現象です。

floatで複数要素の高さがずれる場合に揃える方法

floatで複数要素の高さがずれる解決策1.display:table;、display: table-cell;を使う

HTML

全体を加工要素にdisplay:table;を、高さを同じにしたい中身の要素にdisplay: table-cell;というCSSプロパティを使いましょう。
float-leftにするとdisplay:block;やdisplay:inline-block;が外れてしまい高さが出なくなることもdisplay:tableを使うのが有益な理由です。

CSS

floatで複数要素の高さがずれる解決策2.heightをコンテンツごとに%で変える

原始的な方法ですが、heightをコンテンツの大きさに応じて変えて横並びの要素それぞれが同じ高さになるようにしましょう。

HTML

CSS