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

CSSネタに関して

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

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

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

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

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …