おかげさま – 感謝の種まき –

人生で学んだスキルや知識のアウトプットブログです。旅する自由人を目指すブロガー Hiro先生です。

  • ホーム
  • ひとこと

    Hiroのひとこと♪

    『Hiroの知恵袋🌱』
    有料コミュニティーを オープンしました!
    yoor にて初月無料・翌月から月100円にて
    老若男女無制限ご参加いただけます。

    人間関係、健康、ビジネス、勉強、自己成長 などなど
    人生を豊かにしたい人はご参加ください。
    HiroのBrainを共有します♪

    今すぐ仲間になる

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

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

    • Tweet
    • このエントリーをはてなブックマークに追加

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

    こんな感じです。

    お試しください。

    <スポンサーリンク>



     

     

     

     

     

     

     

     

  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2019-2022 おかげさま – 感謝の種まき – All Rights Reserved.

WordPress Luxeritas Theme is provided by "Thought is free".

  • 
    ホーム
  • 
    メニュー
  • 
    SNS
  • 
    サイドバー
  • 
    検索
  • 
    上へ
 TOP