- ベストアンサー
float:ritghtした画像の左側いっぱいに表を表示する
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
div { padding-right:300px; /* 画像の最大横幅 */ } この指定が#mainのdivにも効いているため幅がなくなったのが原因のようです。 下の例ではわかりやすくタグ名を指定しましたが、実際使うときにはセレクタの頭にdiv#mainを追加した方がいいです。 ためしに div#main div { padding-right:300px; /* 画像の最大横幅 */ } に書き換えたらできました。 table等も別の場所で出てくるかもしれないので同じように指定するのをオススメします。（* {margin:0; padding:0; zoom:1;}の頭だけは何も追加しないでください。） ＞style="padding-right:300px" のように指定する方法を検討しています。 は div.w300 { padding-right:300px; /* 画像の最大横幅 */ } div.w300 .preview { margin-right:-300px; /* 画像の最大横幅 */ width:300px; /* 画像の最大横幅 */ } div.w250 { padding-right:250px; /* 画像の最大横幅 */ } div.w250 .preview { margin-right:-250px; /* 画像の最大横幅 */ width:250px; /* 画像の最大横幅 */ } のようにして必要なwidth分の指定を用意しておいて #main内のdivに対して <div class="w300"> や <div class="w250">のようにすればいいのではないでしょうか。 htmlの変更箇所も一箇所で済みますし。
その他の回答 (4)
下に挙げた例は画像の最大の横幅が決定している時に、同じ指定で使いまわせるようにしたものです。 なので、画像の横幅が300pxであれば残りの幅にテーブルが表示され、横幅が100pxでも同じ幅のテーブルが表示されるものです。 もしも全てで幅をきっちりしたいのであれば1つの指定では難しいので、画像の幅ごとに毎回class等を使ってコメントアウト部分の値を指定してください。
お礼
各ソースで指定している画像の幅は分かるので padding-right:300px; margin-right:-300px; width:300px; の指定をそれぞれ直接タグに style="padding-right:300px" のように 指定する方法を検討しています。 回答番号 No.3 に貼り付けたソースなのですが、 IE6ではテーブルがつぶれた状態になってしまいます。 これさえ解決できれば、上記の方法でやってみようかと思うのですが、 解決できるのでしょうか？？
一箇所訂正です。 margin-right:-300px; /* 画像の最大横幅 */ のところは300pxの前に-を付けて負の値にしてください。 正確には margin-right:-300px; /* 画像の最大横幅分マイナス */ です。
お礼
ご回答ありがとうございます。 ですが、Firefox, IE6 で確認してみましたが、 いずれも意図した結果にはなりませんでした。 画像のwidthを 100, 200, 300 と変えてみましたが、 テーブルの横幅は 300 で固定されています。 画像の幅に応じてテーブルの横幅が500,400,300 と変化してほしいのですが・・・。 私の指定にまずいところがあるのでしょうか？ もう少し教えていただけないでしょうか。 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head profile="http://purl.org/net/ns/metaprof"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- * {margin:0; padding:0; zoom:1;} div#main { width: 600px; } div { padding-right:300px; /* 画像の最大横幅 */ } table { width:100%; float:left; } .preview { display:inline; float:right; margin-right:-300px; /* 画像の最大横幅 */ width:300px; /* 画像の最大横幅 */ } --> </style> </head> <body> <div id="main"> <div> <p class="preview"><img src="test.png" alt="aaaa" width="200" /></p> <table> <tbody> <tr><th>1</th><th>2</th></tr> <tr><td>3</td><td>4</td></tr> </tbody> </table> </div> </div> </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
補足
誤字と分かりづらい表現がありましたので、訂正します。 x> 画像の大きさは画像ごとに異なるため、 x> widthで幅を直接できることはできません。 o>画像の大きさは画像ごとに異なり、親要素の幅も異なるため、 o>テーブルの幅をwidthで直接指定することはできません。
<style type="text/css"> * {margin:0; padding:0; zoom:1;} div {padding-right:300px; /* 画像の最大横幅 */} table { width:100%; float:left; } .preview {display:inline; float:right; margin-right:-300px; /* 画像の最大横幅 */ width:300px; /* 画像の最大横幅 */} </style> <div> <p class="preview"><img src="#" alt="aaaa" /></p> <table> <tbody> <tr><th>1</th><th>2</th></tr> <tr><td>3</td><td>4</td></tr> </tbody> </table> </div> 値は適宜変えてみてください。 firefox3、ie6、7で動作しました。
画像の最大の幅は決めていないのですか？
お礼
お返事ありがとうございます！！ 最大の幅は決めていません。 最大の幅を決めていれば実現できるのでしょうか？？
関連するQ&A
- テーブルの位置について
<img src="..." style="float:right" ...> の後に文章とテーブルを書いたところ、 テーブルが画像と重なって表示されてしまいます。 画像を右側に、左側の余白に文章とテーブルを表示させたいです。 XHMLT1.0 で、CSSの指定で解決したいのですが、 どのようにすればよいのか、教えていただけないでしょうか。 なお、テーブルはスペースいっぱいに表示したいので、width=100%と指定してます.
- ベストアンサー
- HTML
- スタイルシート float
スタイルシートを使って左右分割のページを作ろうと思っています。 #left{ width:170px; float:left; } #right{ float:right; } としたところ、 ブラウザ（IEです）を余裕を持たせているときは正常表示されますが、 左画面 ｜ 右画面 ウインドウ幅を狭くすると、 右側にくる部分が、画面上に、 左側にくる部分が、画面下に、 右画面 -------- 左画面 上下に分割された画面となってしまいます。 これを、ウインドウ幅を狭くしても 左右分割に保つようにするにはどうしたら良いのでしょうか？
- 締切済み
- HTML
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- width100%とfloat
左右分割サイトで ・左側メニューは160px(#menu) ・右は残りすべて(#main) というものを作りたいのです。 #menu {width:160x;float:left;} にすると、#menuは左寄せになりますが #mainは右側に寄ってくれません（width属性を指定していないから）。 tableレイアウトを使用せずにこのようなことができますか？ 条件は ・HTML 4.01 Strict ・tabelを使用しないレイアウト ・フレーム使用なし です。 お願いします！
- ベストアンサー
- HTML
- 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 で画像が指定サイズより小さくなる
困っております。 添付の画像なんですが、 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
- 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
- コーディングで「float」のclearの仕方
htmlとcssのコーディングに関して質問させてください。 右側と左側にボックスをフロートさせた際、 どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを 追加して回り込みをなくしたらよろしいでしょうか？ 分かりにくいかもしれませんがご教授いただければ幸いです。
- 締切済み
- その他([技術者向] コンピューター)
- 段組でfloat:leftとfloat:rightの違い
こんにちは！ 今スタイルシートで段組をやっているんですが 2カラムの右側がfloat:leftとfloat:rightでは微妙に表示が変わります 段組の間のスペースが広くなったり狭くなったりです firefoxで表示するのに左をfloat:left、右をfloat:rightにすると 右側の段組が実現されず下に落ちてしまいます。 通常2カラムの場合の段組はどのように指定するのが正しいのでしょうか？ 過去の質問や、googleで検索しましたがどちらも場合も正しいとか誤ってるという意見が半々で どうにも判断がつかず悩んでいます。 3カラムでもfloat:left float:left float:left とやっているのもあるので こちらが正しいのかな？とも思いましたが やはりそれは違って float:left float:right float:leftが正しいという方もいらっしゃいます 通常段組を組む際はどちらが規格に沿っているのか教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- ブラウザいっぱいに表示されるページが作成できません。
ブラウザいっぱいに表示されるページを作成しようとしているのですが、上手くいきません。 3カラムのサイトで、左側メニュー、真ん中コンテンツ、右側メニューという感じにしようと思っています。 ブラウザのサイズに合わせて真ん中のコンテンツだけが伸び縮みするようにし、左側メニュー、右側メニューは固定したいと思っています。 イメージとしてはGIGAZINEのような感じです。 http://gigazine.net/ ―HTMLソース <div id="contents"> contents </div> <div id="right"> right menu </div> <div id="left"> left menu </div> ―CSS #contents { float: right; } #right { float: right; } #left { float: left; } しかし、真ん中コンテンツは最小サイズは指定しても、最大サイズを指定することができないので、長い文章を書くとその分だけ広がってしまい、結果的に他のメニューが回り込みできなくなって下に移動してしまいます。 position:absolute;を使えば、好きな場所に配置することができるので、これを実現できるのですが、個人的にposition:absolute;はあまり良くないと聞いたことがあります。実際はどうなのでしょうか？ また、GIGAZINEのソースを見ていると、position:absolute;ではなく、position:relative;で相対的に配置しております。 今まで横幅が固定されたサイトしか作ってこなかったので、少し難しいです。アドバイスをお願いします。
- 締切済み
- HTML
お礼
ありがとうございます！！ かなりいい感じにできてきました！！！ 申し訳ないですが、もう少しお付き合いいただけないでしょうか。 現在FireFoxとIE6で確認しながら作成しています。 回り込み中のテーブル中に画像（以下、テーブル中画像）が配置され、 テーブルの幅が100%を超えてしまうような場合に動作が変わってきます。 FireFox ではテーブルの位置はずらさず、右画像の上にまたがってテーブルが表示されます。 IE6ではテーブルの位置を右画像の下にずらしてテーブルを表示します。 どちらかというとFireFoxの動作が理想なのですが、IE6の動作でも許容はできます。 許容できないのは IE6 でテーブルを右画像の下に表示した際、div#main の幅を広げてしまうことです。 padding-right が効いてしまっているのかと思いますが・・・。 対処法があれば教えてください！！！ ※ class="w300" 等の指定では 10px 幅くらいで 100～400くらいまで全て指定しなくてはならなくなってしまうのです・・・。 class="width(300)" とかみたいに CSS にも引数指定できたらいいのですが・・・。PHPとか使ったらできるのでしょうか？？
補足
現状のソースを付けます。 +++++以下、問題のソース++++++++++++++++++++++++ <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head profile="http://purl.org/net/ns/metaprof"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- * {margin:0; padding:0; zoom:1;} div#main { width: 600px; border:1px solid #999;} a.preview { float:right;} img { float:right;} div#main table { width:100%; float:left; border:1px solid #999; } div#main td { border:1px solid #999; } --> </style> <title></title> </head> <body> <div id="main"> <div style="padding-right:160px;"> <a href="" class="preview" style="margin-right:-160px; width:160px;"><img src="test.png" alt="aaaa" width="150"/></a> ここは画像の左、テーブルより上の文章です。左上上上上上上上上上上上上上上上上上上上上 <div> <table> <tbody> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </tbody> </table> </div> ここは画像の左、テーブルの間の文章です。左間間間間間間間間間間間間間間間間間間間間間 <div> <table> <tbody> <tr><td>1</td><td><img src="" width="500" height="10" /></td></tr> <tr><td>3</td><td>4</td></tr> </tbody> </table> </div> ここは画像の左、２つ目のテーブルより下の文章です。左下下下下下下下下下下下下下下下下 </div> ここは画像の回り込みを終えた文章です。終終終終終終終終終終終終終終終終終終終終終終終 <div> <table> <tbody> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </tbody> </table> </div> </div> </body> </html>