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などのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

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

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

no image

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

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

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …