- ベストアンサー
画像がフロートしない
画像とテキストをひとつのテーブル内に組み合わせてレイアウトしています。 ひとつの画像を右上に配置し、左側に詰めてテキストを表示させようとしているのですが（またその逆も）、画像がうまく右によってくれません。試しにテーブルだけのコードにしてみましたがどこに問題があるのでしょうか？ <html> <head> <title></title> <style> .rightbox{ float:left; } </style> </head> <body> <table border="1" width="200" > <tr> <td width=150> <table class="rightbox"> <tr> <td><img src="http://oshiete1.goo.ne.jp/images_goo/goo.gif"></td> </tr> </table> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td> </tr> </table> </body> </html>
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
難しく考えすぎでしょう。 img{float:left} これだけで良いとおもいます。 こうすると "包含ブロック（この場合たぶんimgの親要素）のパディング左上にimgが作られて（float:leftだから）続く行ボックスはimgにfloatがあるのでimgの幅分行ボックスの幅を狭くして包含ブロック上辺から並べられるのでimg要素の横に文字が来ます。（※包含ブロックにその幅が有った場合です。無い場合は回り込みをせずにimgの下に配置されます。）" と言うCSS2の仕様書に書かれている挙動を最近のブラウザはしているように思われます。 "行ボックスはline-heightで高さが決まりますので行ボックスを積み重ねた高さがimgの高さを越えると行ボックスの幅は包含ブロックの幅になります。" と言う挙動をブラウザはするようなので結果的にテーブルなどを使わずにimgにfloat:leftを入れるだけでお望みの形になるかと思われます。
その他の回答 (4)
- 345itati
- ベストアンサー率48% (795/1639)
>フロートはブロック要素の回り込みきのう floatはブロックレベル要素のみにあてられるのでは無く、「位置を決められる要素」に適用出来ますので。 >どちらの方法も上手くテキストが画像の下に詰めてくれない テキストが長くなれば、画像の下の方で詰めてくれるはずですが？ 余白が気になるならmarginとpaddingで調節して下さい。 <table>はそうならないようにセルで切ってますので、こっちは無視して下さい。 スタイルシートを使うなら、配置の為に<table>を使うのはこの場合、余り意味が無いと思います。そもそもレイアウトの為に使うべき要素では無いので。 これでも同じ感じにはなりますが。 <style type="text/css"> <!-- .rightbox{ float: right; } .box1{ width: 200px; } --> </style> //中略// <div class="box1"><div class="rightbox"><img src="http://oshiete1.goo.ne.jp/images_goo/goo.gif"><div> <div>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああこれだけ長い文章だと下の方で画像の下部に表示されると思いますけど・・・・・・・・・・・・・。</div> //個人的に何でもかんでも<div>でくくるのは余り好きではないのですが・・・
お礼
再度ありがとうございます。
- yambejp
- ベストアンサー率51% (3827/7415)
フロートはブロック要素の回り込みきのうですから、テキストと イメージをそれぞれ別のブロック要素にいれてあげればよいでしょう。 <style type="text/css"> .rightbox{ float:left; } </style> <table border="1" width="200"> <tr> <td> <div class="rightbox"><img src="http://oshiete1.goo.ne.jp/images_goo/goo.gif"></div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> </td> </tr> </table>
お礼
ありがとうございました。参考になります。
- 345itati
- ベストアンサー率48% (795/1639)
#1です。最初の<div>閉じてませんでした。 <div class="box1"><p><img src="http://oshiete1.goo.ne.jp/images_goo/goo.gif" class="rightbox">ほげほげほげほげほげほげ</p></div> に修正します。
お礼
どちらの方法も上手くテキストが画像の下に詰めてくれないのですがどうしたものでしょうか？ こんな感じにしたいのです。 text text text 画像画像 text text text 画像画像 text text text 画像画像 text text text text text text text text text text text text text text text また逆のfloat:leftも試してみたのですが上手くいきません。 画像画像 text text text 画像画像 text text text 画像画像 text text text text text text text text text text text text text text text text text text
- 345itati
- ベストアンサー率48% (795/1639)
テーブルを組むか、スタイルシートで回り込ませるかのどっちかにしたら如何ですか。 後画像が右に配置で、テキストは左に回り込ませたいのですよね？ 色々とツッコミ所が多い記述なので、単純に、 <style type="text/css"> <!-- .rightbox{ float: right; } .box1{ width: 200px; } --> </style> //中略// <div class="box1"><p><img src="http://oshiete1.goo.ne.jp/images_goo/goo.gif" class="rightbox">ほげほげほげほげほげほげ</p> でもいいでしょうし、スタイルシートを使わないで<table>だけで <table> <tr> <td>ほげほげほげほげほげほげほげ</td> <td><img src="http://oshiete1.goo.ne.jp/images_goo/goo.gif"></td> </tr> </table> でも「右側に画像、左側にテキスト」の配置にはなるかと。 ボーダーについては省略しましたので。
お礼
ありがとうございます。これで上手くいきました。