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

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

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

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