- ベストアンサー
画像をページ右側に並べる方法が分からず困っています
- 画像をページ右側に並べる方法が分からず困っています。どのようにすれば、文字の回りこみを維持しつつ、画像を縦に並べることができるのでしょうか？
- 画像をページ右側に並べる方法が分からず困っています。float:rightとすると、画像が右から横に並んでしまいます。画像を縦に並べる方法を教えてください。
- 画像をページ右側に並べる方法が分からず困っています。文字の回りこみを維持しつつ、画像を縦に並べる方法を教えてください。
- itadakemasu
- お礼率55% (5/9)
- HTML
- 回答数4
- ありがとう数22
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- metametamu
- ベストアンサー率51% (153/295)
floatとclearを使えばだいたい同じことができます。 <html> <head> <style type="text/css"> div{width:800px;} .thumbnail{float:right;clear:right;background:red;} .thumbnail img{width:200px;height:200px;} </style> </head> <body> <div> <p class="thumbnail"><img src="" alt=""></p> <p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p> <p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p> <p class="thumbnail"><img src="" alt=""></p><p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p> <p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p> <p>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</p> </div> </body> </html> IEで確認しきれていないので若干怪しい部分もありますが・・・ 注意する点としては、モダンブラウザは問題ありませんがIEではfloatしてない要素(上の例だとp要素)のhaslayoutはオンにしないよう気をつける点でしょうか。やり方によっては上手く文章が大きく改行されるような見栄えになってしまうので。 ADeeeeeeeeeeeeeeeeeeeeee
お礼
解決しました、ありがとうございます。 floatとclearを同じ所で指定できるんですね！
- nakanaru
- ベストアンサー率42% (8/19)
僕の場合フロントページですが、 表を横に2列にして潜入してこの表の線の太さを0にして非表示します。 この表の中に画像やテキストスタイルの文章を書き込みます。 見えない表で区切ってやる方法が比較的簡単だと思っています。 実際にご指定のページをフロントページで開くと自動車の画像の全ては 見えない表で括ってありますよ。
補足
ご回答ありがとうございます。 すみません、私の説明が悪かったようで、 outbraveさんへの補足をご参照ください。
- outbrave
- ベストアンサー率60% (231/380)
float:right をご存知方なら、ソースを見ればわかると思うのですが。 >リンク先のように、文字の回りこみを維持しつつ どこのことでしょう？画像の横に文字は見当たらないのですが とりあえず例を <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title></title> <link rel="stylesheet" href="./themes/style.css" type="text/css" /> </head> <body> <div style="margin:0 auto"> <div style="width:600px;border:solid 1px #99cccc;float:left"> メイン </div> <div style="width:200px;float:left"> <div style="border:solid 1px #cccccc;margin-bottom:1em"> <div>画像1</div> <div>文章1</div> </div> <div style="border:solid 1px #cccccc;margin-bottom:1em"> <div>画像2</div> <div>文章2</div> </div> </div> <div style="clear:both"></div> </div> </body> </html>
補足
早速のご回答ありがとうございます。 わたしの説明が足りなかったようで、追加させていただきます。 レイアウトは次のようなものを目指しています。 文文文文文文文■■■■ 文文文文文文文■画像■ 文文文文文文文■■■■ 文文文文文文文□□□□ 文文文文文文文□画像□ 文文文文文文文□□□□ 文文文文文文文文文文文 文文文文文文文文文文文 文文文文文文文■■■■ 文文文文文文文■画像■ 文文文文文文文■■■■ 文文文文文文文文文文文 文文文文 あと、掲示板のようなシステムを作っていまして、文章と画像はいろいろなパターンあるので、 ご回答のような方法だと、いろんなパターンに対応できないような気がします。 wikipediaのソースをみても画像を一括してdivで囲っているようではなさそうです。 3時間くらいいろいろと方法を探しているのですが、いい方法が見つかりません。
お礼
回答ありがとうございます。