レスポンシブ化するなら知っておきたいtable-cellの使い方 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ

こんにちは、ECプロデュース部の岡本です。 今回は「要素を段落ちさせずに並べること」ができる便利なプロパティ「table-cell」について紹介します。 RWDグローバルナビの課題：段落ち サイトをレスポンシブする際、必ず問題になるのが「グローバルナビの扱い方」です。 floatやinline-blockで作成した場合、全ての要素で単位を「％」に指定しないと「段落ち」が発生します。 段落ちの例 しかし上の画像のように一部のコンテンツの横幅を固定化させたいケースもあります。 こんな時に使いたいのが、「table-cell」です。 tableレイアウトを実現する：table-cell table-cell実装例 「table-cell」は要素を「tdタグ」と同じにするプロパティで、displayにて設定します。 親要素に「display:table」を設定する必要がありますが、この２つだけでほ

[drunkmotty]

メモ。