- ベストアンサー
CSS カラム落ち
Wordpressでホームページを作成しているのですが、画面をズーム縮小するとカラム落ちします。 画像のような感じで、ズーム縮小すると真ん中の緑の３つが右に寄って行き、最終的に一番右側の緑が下に行ってしまいます。 これはどのようにすれば防げるのでしょうか？ 教えてください
- Sorara2013
- お礼率83% (44/53)
- CSS
- 回答数1
- ありがとう数9
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- カラム落ちの何が悪いのか
最初にWebは初心者同然とお断りしておきます。 カラム落ちが問題視されているのを時々目にします。 ここでも数個下でカラム落ちの質問が出ていますね。 カラム落ちするのはユーザが画面を極端に小さくするからで、 それはユーザ側の自由（大きくもできる）なのだから 別にそんなに気にする必要がないのではないか。 商用サイトで上記のような考えは通じますでしょうか。 皆様のご意見をお伺いしたいと思います。
- ベストアンサー
- CSS
- 画面を縮小するとカラムが落ちます・・・。
現在CSSで2カラム構成のサイトを作成しています。 左メイン、右サイドバーと言った感じです。 ただ、ブラウザの画面を小さくしていくと、右のサードバーが隠れずそのまま下に落ちてしまいます。 いずれもpx単位で定義しています・・・。 画面の縮小を行ってもカラム落ちしないように、強制的にそこにとどまらせる方法はありませんでしょうか？また、カラムが落ちることに関して、何か予測される原因などが御座いましたら、アドバイスいただけますと幸いです。 どうぞ、宜しくお願いいたします。
- 締切済み
- CSS
- ファイヤーフォックスでカラム落ちします。
下記サイトを作っているのですが、東京都世田谷区認可保育園という部分と画像を変える四つの画像が画面を縮小するとファイヤーフォックスでカラム落ちします。 下記をやってみても治りません。どうすれば治るのでしょうか？ http://okwave.jp/qa/q3719369.html 初めまして。 FireFoxやsafariなどの正規表現に忠実なブラウザでは ────────────────────────── width(550px)＋padding(50px)＝実際に表示される横幅 ────────────────────────── となります。 つまり、#Aの横幅に対して#B＋#Cの値の方が大きくなってしまっているので、結果として、収まらなかった#Cが下に追いやられてしまっている、という具合です。 width550pxがwidth(550px)＋padding(50px)より小さくなってカラム落ちする。 対処法としては ────────────────────────── <div style="横幅を指定">ここにmargin <div style="余白を指定">内容物</div>ここにpadding </div> ────────────────────────── このように相性の悪いプロパティは、各要素に対して一つずつ指定する事で全てのブラウザに対応出来ます。 http://sample1.digi2.jp/kindergarten2/index.html
- ベストアンサー
- HTML
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- カラムの高さを揃える
添付した画像のようにスタイルを書いてます。 左カラムには<div class="boxLEFT">を2つ使っており、 下の<div class="boxLEFT">と右カラム<div class="boxRIGHT">の 天地を合わせたいのですが、どのように行えばよろしいでしょうか？ javasprictでもcssでも構いません。 初心者なので、難しいと分からりませんので、 お手柔らかに教えてください。 よろしくお願いします。
- 締切済み
- デザイナー・クリエイティブ職
- 横並びリスト ブラウザ縮小 カラム落ち
よろしくお願いします。 ulとliで横並びの商品リストの様なものを作成していて、 ようやく完成したと思っていたのですが、 ブラウザの拡大/縮小機能を使って、 少しでも縮小するとカラム落ちが発生してしまいます・・・。 完成したと思っていたので焦っております(汗) 簡単にソースを記載しますので、 原因と対策がわかりましたら、どうか回答宜しくお願いします。 ul{ width:720px; list-style:none; } li{ width:142px; border:1px solid #000; float: left; } このような感じで、ulには別にクラスを指定して、clearfixも指定しています。 .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ ulの全体720pxを5個のliで割って、144pxとなり、 そこからborder両サイド1pxづつを引いて142pxをliに指定しているのですが、 間違っているのでしょうか？ liの幅を144pxにしてborderを指定しない場合は、 縮小してもカラム落ちは起こりません。 初歩的なことかもしれませんが、 どうぞよろしくお願いします。
- ベストアンサー
- CSS
- 【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう
お世話になります。 左がメニュー（仮称・BOX-A、float:left指定）、右が（仮称・BOX-B）本文、下にフッター（clear: both）…といったページを作成しています。 問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。 ↓ ↓ ↓ <img src="xxx.jpg" style="float:left; width:100px"> 画像回り込み文章～～～文章 <br style="clear:left"> 通常の文章 ----------------------------------------------------------- しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容（高さ）分、 BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。 …以下のURLが、その状態の例です。 http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html 上記サイト様の、 http://www.geocities.jp/multi_column/practice/2column2.html#liquid の、ページ半ば…よりやや下に、上記問題点を克服するという 『メインカラム幅可変、サイドバー幅固定 2カラム（ネガティブマージン型）』 の説明が載っているのですが、同じように組んでも上手く行きません…。 本文中（BOX-B）で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか？ 何卒、宜しくお願い致します。
- ベストアンサー
- HTML
- CSS段組み？で右カラムを右寄せにするには？
説明が難しいのですが・・・ テーブルレイアウトでいえば、下記のHTMLで実現できるような表示方法を、 tableタグを使わずに実現したいです。 <table style="width: 100%;"><tr> <td>左パーツ</td> <td style="text-align: right;">右パーツ</td> </tr></table> divタグに float: left; を付けると、２つのdivブロックを横並びに配置できますが、 右側にあるdivにtext-align: right;を付けても、左寄せになってしまいます。 ※width未指定なので当たり前なのですが・・・ ただ、今回の場合は実際にマルチカラムを実現したいわけではなく、 上記コードでいうところの左パーツを画面の左端へ、 そして右パーツを画面の右端に表示させたいだけです。 左右それぞれの横幅は特定していません。 どなたか分かる方、教えて下さい。
- ベストアンサー
- CSS
- ホームページ スマホサイズ
ホームページを作成したのですが、スマホで表示したときに拡大されて表示されてしまします。 レイアウトを変えずにそのまま縮小し、画面サイズに合わせた状態で表示させたいのですが、どうすればいいでしょうか？ （wordpressで作っています。） 教えてください。
- 締切済み
- CSS
お礼
わかりました、ありがとうございますｍ(_ _ )ｍ