skillup

技術ブログ

デザイン

レイアウトカラム落ち対策

投稿日:

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。

もちろん幅調節とかそういうのはなし。

flex-wrap:nowrap

ブラウザがflexが問題なければこのプロパティ使えるならこれが一番いいかと。

display:table,table-cell

親にdisplay:table,子供にdisplay:table-cell。複雑な階層構造を持っているとちょっとめんどい。子供がtableかつtable-cellなどには使えないため。

white-space:nowrap

子供がinlineかdisplay:inline-blockの時に使える。

本来は文字を改行させないためのものだが、内部がinline-blockであればブロック的な要素であっても使える。一時的な内包要素を作れば他に影響を与えないので一時的な対策として、密集地では結構使える気がする。

 

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …