IEでCSSのfloatが効かず改行されてしまう問題を解消する方法

2020年4月5日2020年4月27日CSS

CSSで、float:leftだとかfloat:rightとかで指定することで
左右に並べて表示させることが出来るが

これが時々左右に並べて表示出来ず
改行されてしまうことがある。

これの原因としてはwidthの指定値よりも
合計が多くなってしまった場合などで
カラム落ちが起こってしまったりする。

しかしこれら問題はなく
Google chromeでも問題なく表示されていても
IEでカラム落ちが起こってしまうことがある

個人的にはIEは不具合も多く
最悪なブラウザだと思っているので
自分では使うこともないのだが
お客様は使っている方も多く
それに合わせる必要があったりするため
対処しなきゃならない時もある。

ちなみにTwitterの埋め込みコードも
IEでは表示されない仕様になってます。

ということで
もしカラム落ちが起こった場合は
まず合計幅がWidthを越えていないか確認して
それら基本的問題がない場合は、
「display: inline;」を追加することで改善します。

.test{
float:left;
display: inline;
}

.test2{
float:right;
display: inline;
}

こんな感じです。

お試しください。

＜スポンサーリンク＞