• ベストアンサー

スタイルシートで、画像の横にリストを表示するには?

テーブルを使えば、1行2列のテーブルに左に画像、右にリストを入れれば、横並びができるかとおもいますが、スタイルシートを使った場合、画像の横にリストをおこうとすると、どうしても下に流れてしまいます。divで、画像とリストを囲って、floatをつかって右、左とすればできるかもしれないかなとおもいましたが、もっと簡単にできる方法がありそうなんですが。。。 なにとぞよろしくお願いいたします。

  • muxic
  • お礼率37% (97/259)
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

imgタグの中に「style="float:left;"」 と記述するのが一番妥当なのではないでしょうか。 しかしウインドウの幅が小さいとテキストが 回りこまなくなるのが難点ですね。 因みに<br clear="all">で回り込みを解除出来ます

muxic
質問者

お礼

ありがとうございました、解決できました。

関連するQ&A

  • スタイルシートでデザイン

    style.cssからの読み込みで<div class=""></div>を使いテーブルデザインを行っていますが、スタイルシートで表のように、縦3列横2列等で表示させる方法がわかりません。位置指定で表示させるしかないのでしょうか? 最近スタイルシートを使いはじめ、上記のデザイン方法をいろいろなサイトで調べてみましたがわかりませんでした。方法、又は、わかりやすい参考サイトをお教えいただけると幸いです。

    • ベストアンサー
    • HTML
  • DIVで表示が崩れる。

    こんにちわ。 お願いします。 TABLEから脱出してDIVで整理整頓しようとおもっているのですが なかなかうまくいきません。 ソースはっちゃいますね <DIV style="width : 780px;height : 100%;z-index : 0;"> <DIV style="width : 780px;clear : both;z-index : 1;"></DIV>(2) <DIV style="width : 200px;float : left;z-index : 2;"></DIV> <DIV style="width : 380px;float : left;z-index : 2;"></DIV> <DIV style="width : 200px;float : right;z-index : 2;"></DIV>(1) </DIV> といった感じでベースになっているDIVがデカデカとあり その中に一段目のDIV(回り込み解除/ヘッダー的役割です)があってその下にDIVが3つ回りこみで並んでる。 という。 で、問題が、HBビルダーで作っているのですが、 3つならんでるDIV、 一番左は「左に廻り込み」 真ん中は「左に廻り込み」 で、問題は一番右です。 ここを「右に廻り込み」にしなきゃ3つ並ばないのですが、(廻り込み設定しない場合一段下がってしまいます)このままだと、(1)の部分に文章やらTABLEやら画像やらいれると(2)の位置へ表示されてしまいます。(ソースは変わらないのですが)。 ならばとおもってDIVを入れると、右のDIVの下に来てしまいます。 ならばとおもい3つのDIVをDIVで囲み、その外に書いても右のDIVの下へ… 俺がしたいのは、 とにかく一段下げたいのです。TABLEでいえばTRを作りたい。 わかりますでしょうか?

    • ベストアンサー
    • HTML
  • スタイルシート 外部ファイルについて質問です。

    スタイルシート 外部ファイルについて質問です。 レイアウト用のスタイルシート <style type="text/css"> <!-- .outer { width:; background-color:; padding:15px; margin:0 auto 0 auto; } .menu { float:left; width:20%; background-color:; height:100%; } .main { float:right; width:70%; background-color:; height:100%; } .clears{ clear:both; } --> </style> を、外部ファイルに移したいのですが、やり方が分かりません。 現在ページ内で <div class="outer">   <!-- 左スタイル 開始 -->   <div class="menu">   文章など   </div>   <!-- 右スタイル 開始 -->   <div class="main">   文章など   </div>   <!-- 右スタイル おわり --> <br class="clears"> </div> <!-- 左右スタイルシート おわり --> という方法で表記しています。 外部ファイルへの移し方、外部ファイルの中身をどうしたらいいか、 お手数ですが、教えていただけると幸いです。

  • スタイルシートで、テーブルのセルの中身をセンタリングさせたい。

    スタイルシートで、3行5列のテーブルのセルの中身全てを 横にセンタリングさせたいのですが、 皆さんはどのようにやってますか? ちなみにセルの中に入るのは画像のみです。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • これもスタイルシートっていいますか?

    <div style="text-align:left;"> 文字を 左に寄せる </div> このようなタグはスタイルシートというのでしょうか? style= を使ってるからスタイルシートですか?

    • ベストアンサー
    • HTML
  • テーブル内の画像を横並べにしたい

    HTMLテーブルの学習中の初心者です、よろしくお願いいたします。 テーブル内に画像を配置すると縦並びになってしまいます。 これを横並びにしたいのですが、(添付画像参照ください) 同じテーブルの上段には既に列を分けてある1行目があります。 問題の2行目、列を分けてそれぞれのセルに画像を当て横幅を指定 という方法ですと上段の横幅に揃ってしまうのか、幅が大きく広がり過ぎてしまいうまくいきません。 テーブル以外にも方法はあるようなのですが 現在テーブルの学習をしているためテーブルでのやり方を調べています。 初心者ですので解りやすいもっともシンプルなやり方ございましたら ぜひご指導お願いいたします。

  • リストについて

    <li>要素にスタイルシートで display:inline; とすると、リストが横並びになりますが、 とある書籍には上記の方法ではなく float:left; と書いてありました。 どちらも正しいのでしょうか? 皆さんはどちらを使っていますか? メリット、デメリットなどもあれば教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • スタイルシートを使って段組でのバディングは?

    書籍にのっていたスタイルシートでの段組を 次のように記述してみました。 <DIV style="float:left;border-right:3px dashed #000000;width:50%;padding-left:10px;"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV><DIV style="padding-left:10px">  ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV> 中央に点線が入って文章が左右に分けられるのですが、 文字と中央線の余白がないので、paddingやmarginを使って みたのですが、特に右側文章の左にある点線と文字の空間がどうしてもできません。(左側部分のの左右余白は機能するのですが) tableを使ったときはpadding-leftで設定できたのですが、正しい方法がありましたらお教えください。 書籍にもここらへんの説明がないのです。

  • テーブルの中で、画像の横に画像を表示

    意味不明なタイトルをクリックしてくださってありがとうございます。 さっそく質問ですが、 問題のテーブルがある私のブログです。同盟などの小さな画像をテーブルタグの中に敷き詰めています。 ですが、縦長の画像がありまして、普通に画像のリンクを並べているだけでは、その画像の隣だけへんな空間ができてしまいます。なので、次の画像がその縦長の画像の横に来るように<img>タグの中に、style="float:left"というのをつけてみたのですが、その下からテーブルが途切れて、悲惨なことになってしまいます。 どんなタグを使えば、テーブルが途切れなくなりますか??

    • ベストアンサー
    • HTML
  • スタイルシートで簡単に画像を表示させたい。

    スタイルシートを使って画像を表示させることは出来ますか? 現在ブログを使っているのですが、毎度毎度 同じ画像を使うのですが、タグうちでは非常に面倒です。 <Div class="xxx">と言う感じで、簡単に表示出来ないでしょうか? もし良ければ教えて頂けないでしょうか?

専門家に質問してみよう