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

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …

アーカイブ