- ベストアンサー
float:ritghtした画像の左側いっぱいに表を表示する
float:right を指定し画像を右側に表示します。 その左側にtableで表を表示します。 この表を画像の左側いっぱいに表示したいのですが、 width:100%を指定すると画像の上まで広がってしまいます。 画像の大きさは画像ごとに異なるため、 widthで幅を直接できることはできません。 どのように指定したら、画像の左側いっぱいに テーブルを表示できますか？
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (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で直接指定することはできません。
画像の最大の幅は決めていないのですか？
お礼
お返事ありがとうございます！！ 最大の幅は決めていません。 最大の幅を決めていれば実現できるのでしょうか？？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ありがとうございます！！ かなりいい感じにできてきました！！！ 申し訳ないですが、もう少しお付き合いいただけないでしょうか。 現在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>