floatより簡単、きれいに横並びレイアウトできるdisplay:tableについて

2017-12-28 @niketcha

横並びレイアウトを作るものとして、tableやfloat以外にdisplay:tableというのがあるのを最近知りました。

floatだとディスプレイサイズを変えた時のレイアウト崩れが厄介だったりしますが、display:tableを使えば簡単、きれいにレイアウトを作ることができます。

Sponsored Link

display:tableの使い方

テーブルの枠にしたい要素(divやulなど)にdisplay:tableを指定します。

テーブルのセルにしたい要素(divやliなど)にdisplay:table-cellを指定します。

HTML
<div class="faketable">
    <div class="fakecell">
        <p>左のコンテンツ</p>
    </div>
    <div class="fakecell">
        <p>真ん中のコンテンツ</p>
    </div>
    <div class="fakecell">
        <p>右のコンテンツ</p>
    </div>
</div>
css
.faketable{
    display: table;
    table-layout:fixed;
    width:100%;
}
.fakecell{
  display: table-cell;
}

table-layout:fixed;を指定すると、table-cellの幅が均等に割り付けられます。

display:table-cellの特徴

display:table-cellの縦の幅は、一番長いものに揃えられます。

vertical-alignを使って縦の位置を指定することもできます。

-ウェブサイト構築, css

コメントを残す

お名前もメールも入力は任意です。お気軽に指摘や質問などしていただけると嬉しいです。

Gravatarに登録すると、お好きな画像をアバターに設定できます。

Copyright© ニケッチャニッキ , 2017-2018 All Rights Reserved.