- ベストアンサー
画像にfloatを指定すると別ボックスと重複してしまいます
大幅に端折ってしまい申し訳ありませんが、 2カラム構造の左カラムに以下のようなコードを書いたところ 画像(sample.jpg)とボックスbとが重なって表示されてしまいます。 そこでフロートを解除しようとボックスaの後に<br style="clear:both">を記載すると、 右カラムの下にボックスbが表示されてしまいました。 このような画像にfloatを使用した際の高さからくる重なりを防ぐ方法などありませんでしょうか？ 初心者な質問で申し訳ありませんが、宜しくお願いします。 <DIV id="a"> <img src="sample.jpg" style="float:right;"> </DIV> <DIV id="b"> hoge </DIV>
- minarai563
- お礼率80% (21/26)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そもそもfloatとは、ボックス要素(p,div,li・・)内の要素をブロックにしてfloat、その周囲に残りの要素を回りこませるので、ブロック同士で行うのは本来の使い方と異なります。floatに伴う北以外の動作の大部分はそれに由来するものです。 たとえば、画像を右に配置して他の要素を回り込ませるのなら単純に、 <div> <p><img stryle="float:left"></p> <p>他のコンテント・・・・・・</p> <hr style="visibility:hidden;height:0px;"> 次の内容・・・・ </div> でよいはず。 内容の左端を空けたければ、<p style="margin:left:100px;">他のコンテンツ・・・</p>
その他の回答 (1)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
<p><img src="sample.jpg" style="float:right;">hoge</p> これで画像が右寄せで段落の文章が適当に流れ込む。
お礼
早速のご回答ありがとうございます。 早速ためしたところ、IEでは希望していたとおりに表示されました！ しかしながら、Firefoxでは相変わらず重複して表示されます。。
関連するQ&A
- float で画像が指定サイズより小さくなる
困っております。 添付の画像なんですが、 float で、370px 幅のdiv を横並びにして、 その中に、それぞれ370px幅の画像を入れたいのですが、 なぜか、勝手に縮小されてしまいます。 これは、画像の詳細を見ると333px になっております。 上の横並びの画像と、下の画像は、全く同じものです。 HTMLとCSSを下記します。 どなたか、お知恵を拝借いただければ、助かります。 宜しくお願いいたします。 <div> <div class="float_370"><img src="image/black370.jpg" alt=""></div> <div class="float_370_2"><img src="image/black370.jpg" alt=""></div> <div><img src="image/black370.jpg" alt=""></div> </div> .float_370 { float:left; margin:0; padding:0; width:370px; } .float_370 img { width: 370px; margin:0; padding:0; } .float_370_2 { float:left; margin:0; padding:0; width:370px; }
- ベストアンサー
- CSS
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- 【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
- float divの関係
ブロックdiv（Pとします）の中に、２つのブロックdivがあります。それぞれA、Bとします。 floatでA、Bを左寄せに並べた場合、Pに適用したスタイルシートがA、Bに反映されません。（文字サイズなど） 何が問題でしょうか？ よろしくお願いします。 <div id="P-style"> <div id="A-style">aa</div> <div id="B-style">bb</div> </div>
- ベストアンサー
- CSS
- floatでボックスを並べる
横幅300px、縦幅100pxの親ボックス"example"に、 １辺がそれぞれ100px（正方形）の（子）ボックスを”float”を使って４つ並べます。 子ボックス（ｐ、パラグラフを使います）のクラス名は、（a）、（b）,（c）（d）です。 並べ方は、左端上に（a）を、右端上に(b)を、左端下に(c),右端下に(d)の配置です。 中央は100px開くことになります。 HTMLはこんなもので。 <div class="example"> <p class="a">aボックスです。</p> <p class="b">bボックスです。</p> <p class="c">cボックスです。</p> <p class="d">dボックスです。</p> </div> floatを使い配置したいのですが、どうも(d)あたりが怪しいのです。 どなたかCSSの”正しい” コードをアドバイスいただければありがたいのですが。 また、その子ボックスに対して、用いるfloatプロパティの理由等もお教え願えればと思います。 よろしくお願いいたします。
- 締切済み
- その他(ソフトウェア)
- floatで並べた２つのdivの高さを揃えるには？
コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか？ 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。
- 締切済み
- CSS
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- IE7でfloatしない原因
css初心者です。 テキストの横に画像をフロートさせたいのですが、 IE７のみ、表示が崩れてしまいます。 原因を教えてください。 簡潔に必要な部分だけを書き出すと、 HTMLは以下のようになっています。 <div class="main"> <p class="float">テキスト1</p> <img src="a.jpg" alt="A画像" width="100" height="10"class="a"> <img src="a.jpg" alt="B画像" width="100" height="10"class="b"> <p class="padding"><a href="index.html">テキスト２</a></p> </div> CSSは以下。 div.main { width: 600px; padding:15px; } .float{ float:left; width:100px; } .a { float:left; padding-right:20px; padding-bottom:5px; } .b { clear:left; padding-bottom:5px; } .padding{ padding-bottom:10px; } 表現したいのは、 ～～～～～～～～～～～～～～ テキスト１ A画像 B画像 テキスト２ ～～～～～～～～～～～～～～ このようなレイアウトです。 IE８、Firefox、Chromeでは希望通りのレイアウトになっていますが、 IE７でみると、 ～～～～～～～～～～～～～～ テキスト１ A画像 B画像 テキスト２ ～～～～～～～～～～～～～～ となっています。 また、画像が一つだけ（A画像だけ）のパターンもあるのですが、 この場合には ～～～～～～～～～～～～～～ テキスト１ A画像 テキスト２ ～～～～～～～～～～～～～～ となってしまいます。 A画像とB画像はまったく同じ大きさです。 padding-bottom指定は、各行の行間を開けたくて指定しています。 宜しくお願いします。
- ベストアンサー
- CSS
- floatを使ったレイアウトのくずれについて
Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし（各々width,paddingの合計）containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 なるほど・・ ブロック同士で行うのは本来の使い方とは異なるのですね。 以後、気に留めていきたいと思います。 早速教えて頂いた方法を参考に組み直したところ、無事に思っていたように表示されました。 ありがとうございます。