ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

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

f:id:niketcha:20190707172334j:plain

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

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

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を使って縦の位置を指定することもできます。