- ベストアンサー
画像をページ右側に並べる方法が分からず困っています
- 画像をページ右側に並べる方法が分からず困っています。どのようにすれば、文字の回りこみを維持しつつ、画像を縦に並べることができるのでしょうか？
- 画像をページ右側に並べる方法が分からず困っています。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時間くらいいろいろと方法を探しているのですが、いい方法が見つかりません。
関連するQ&A
- ページの名前をひらがなにする方法？
ページの名前をひらがなにする方法？ 日本語ドメインとは別で普通のアルファベットのドメインを使用しているのにページの所の表示をひらがなにする方法って簡単に出来るのでしょうか？ ウィキペディアの例です。 http://ja.wikipedia.org/wiki/%E3%81%B2%E3%82%89%E3%81%8C%E3%81%AA%E3%83%BB%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A%E5%9C%B0%E5%90%8D
- ベストアンサー
- HTML
- あなたが選ぶ！(-_-;)な外国人選手は？
「神のお告げ」で帰国したグリーンウェル(-_-;) http://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%BB%E3%82%B0%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%A6%E3%82%A7%E3%83%AB 「浅草観光」のミセリ(-_-;) http://ja.wikipedia.org/wiki/%E3%83%80%E3%83%B3%E3%83%BB%E3%83%9F%E3%82%BB%E3%83%AA ４月分の月給だけもらってドロンしたスノー(-_-;) http://ja.wikipedia.org/wiki/%E3%83%90%E3%83%BC%E3%83%AB%E3%83%BB%E3%82%B9%E3%83%8E%E3%83%BC あなたが選ぶ！(-_-;)な外国人選手は？
- ベストアンサー
- 野球
- 日本語URLと文字コード。名称を教えてください。
例えばブラウザのURL欄に入力した http://ja.wikipedia.org/wiki/日本語 という文字列は、IE以外では、それをテキストエディタなどにコピペすると http://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E8%AA%9E となりますが、この「%(16進数)」の文字コードの名称を教えていただけないでしょうか。 よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- wikipediaで、画像を載せたい。
wikipedia(ウィキペディア)を使っているのですが、画像をどうやって載せるのかが分かりません。 以下のリンク、カルピスの記事の右側にある表みたいなものも載せたいのですが、（表の中に画像を入れるかたちで）どうすればいいでしょう。 ある、株式会社の記事をつくりたいのです。 自分の父の会社なので・・・ 記事作りは、未経験ではありませんが、画像や表は載せられませんでした。 知っている方は教えてください。 http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%AB%E3%83%94%E3%82%B9
- ベストアンサー
- その他（学問・教育）
- カメレオン、と言えば、
『らりってんじゃねぇよ？』 知らないか・・・・・（汗） http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%AC%E3%82%AA%E3%83%B3_%28%E6%BC%AB%E7%94%BB%29
- ベストアンサー
- アンケート
- ステークホルダーと株主総会
Wikipediaで株主総会（http://ja.wikipedia.org/wiki/%E6%A0%AA%E4%B8%BB%E7%B7%8F%E4%BC%9A）のページを閲覧しますと、下記の通りの記述が見付かりますね。 「株主は実質的な会社の所有者であり、株主総会は会社の最高機関である。」 従いまして、そういう記載の通りの事情が御座いますので、別のページ（http://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%83%BC%E3%82%AF%E3%83%9B%E3%83%AB%E3%83%80%E3%83%BC）で説明されています通りに、株主がステークホルダーに含まれるのか否か定まっていないのでしょうか？
- ベストアンサー
- 経済
- メンタリストDaiGo と、さかなクンは似てる？
メンタリストDaiGo（ダイゴ）と さかなクンは、似てますよね？ 顔がソックリにしかみえません！ どう思いますか？ メンタリストDaiGo（ダイゴ）wiki http://ja.wikipedia.org/wiki/%E3%81%95%E3%81%8B%E3%81%AA%E3%82%AF%E3%83%B3 さかなクンwiki http://ja.wikipedia.org/wiki/DaiGo
- ベストアンサー
- その他（芸能人・有名人）
- 抽象的だと分かり難いですから、教えて下さい。
『仕掛かり品( http://ja.wikipedia.org/wiki/%E4%BB%95%E6%8E%9B%E5%93%81 )』と『半製品( http://ja.wikipedia.org/wiki/%E5%8D%8A%E8%A3%BD%E5%93%81 )』との具体例を紹介して下さいませ。
- ベストアンサー
- 簿記
- N-フェニルアセトアミドの N の意味
質問タイトルの通りなのですが、N-フェニルアセトアミドの Nの意味は何でしょうか。 http://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%BB%E3%83%88%E3%82%A2%E3%83%8B%E3%83%AA%E3%83%89
- ベストアンサー
- 化学
- HTML初心者の方向けに、HTMLでチェックボックスで複数の値を処理する方法について説明します。
- 具体的な要件として、チェックボックスをチェックし、計算ボタンを押すと指定した行の列の値を取得し、その値の割り算を行い、合計値を表示させることを考えています。
- データを一つ取り込むことはできるが、複数データを取り込む方法がわからない初心者の方に対して、実際のコードを使って詳しく説明します。
お礼
回答ありがとうございます。