CSSでfloatした要素の高さを揃える方法をご紹介!

今回はCSSでfloatした要素の高さを揃える方法をサンプルコード付きで紹介します。floatで横並びしている要素の高さを揃えるためにはoverflow: hidden;を使用する事で飛び出している要素を見えなくする事ができます。

コンテンツ [表示]

  1. 1CSSでfloatした要素の高さを揃えたい
  2. 2CSSでfloatした要素の高さを揃える方法
  3. 2.1padding-bottomとmargin-bottomで要素を下に伸ばす
  4. 2.2overflow: hidden;

CSSでfloatした要素の高さを揃えたい

floatプロパティを使用する事で要素を横並びにする事ができます。

しかし下記のサンプルコードのように横並びした際、高さが揃わずに困る事があると思います。

この記事ではCSSでfloatした要素の高さを揃える方法を解説いたします。

CSSでfloatした要素の高さを揃える方法

floatした要素の高さを揃える方法は、要素を下に伸ばし要素のはみ出している部分を見えなくする必要があります。

詳しい説明を次章で紹介いたします。

padding-bottomとmargin-bottomで要素を下に伸ばす

  padding-bottom: 200px;
  margin-bottom: -200px;

padding-bottom: 200px;margin-bottom: -200px;をCSSで要素を下に伸ばし#containerより要素を下に広げます。

padding-bottom: 200px;margin-bottom: -200px;ではなくても#containerより要素が下に広がれば良いので数値は何にでも大丈夫です。

下記のサンプルコード#container(ピンク内)より要素を下にしています。

overflow: hidden;

overflow: hidden;とは指定をすると、要素のはみ出している部分を見えなくするプロパティです。

あわせて読みたい
overflow
CSSのoverflowプロパティは要素の内容がボックスの範囲から溢れる場合に、その見せ方を制御するプロパティです。overflowプロパティの構文や使い方をサンプルコード付きで解説します。

下記のサンプルコードのように指定すると#containerの部分まで見えないようにしてくれるので高さを変更したい際は#containerheight: 150px;を変更して下さい。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

shu
ライター

shu

主にHTML & CSS、Bootstrap の記事を執筆します。皆さんがわかりやすく、記憶に残る情報を発信していきます。