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

※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。

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;
}

こんな感じです。

お試しください。

<スポンサーリンク>



 

 

 

 

 

 

 

 

\応援ありがとうございます🌿/
各種ブログランキングに参加しています✨

アバター画像

Hiro先生

おかげさまで豊かさに満たされた日々を
今、素敵に生きています
感謝の種まきによって人生が根底から変わることを知って
素敵なご縁の輪を広げながら、
望む未来を叶える、奇跡を起こし続けるお手伝いをしています。

記事本文: 352