1170040056 このようなcssを組みたい場合、どう記述したらよいでしょうか?

左のボックスにはテキストが入ります。
右の画像の横幅は記事によって変動し、それにあわせて左のボックスの横幅も(テキストだけでなく枠線も)変動するようにしたいのですが可能でしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/01/29 12:07:37
  • 終了:2007/01/29 21:56:41

回答(4件)

id:hamster009 No.1

hamster009回答回数3431ベストアンサー獲得回数502007/01/29 12:35:40

ポイント5pt

人力検索は50円からだけど、html指導は50円ではないです。http://ahoo

id:fragarach No.2

fragarach回答回数41ベストアンサー獲得回数72007/01/29 14:03:40

ポイント26pt

http://www6.plala.or.jp/go_west/nextcss/

テーブルを使うのが一番簡単では?

HTML

<table>
<tr>
<td class="text">
<p>テキスト</p>
</td>
<td><img src="http://xxx.yyy.zzz/img.jpg"></td>
</tr>
</table>

CSS

table {
 width:650px;
}
td {
 vertical-align:top;
}
td.text p {
 border:4px double #f00;
}
id:sakurai_ryo

回答ありがとうございます。

なるほど、CSSが無理だった場合使わせて頂こうと思います。

ありがとうございました。

2007/01/29 14:43:17
id:eco_clover No.3

eco_clover回答回数11ベストアンサー獲得回数12007/01/29 15:49:30

ポイント19pt

floatという回り込み機能を使えばよいと思います。

解説サイトの例

http://www.stylish-style.com/csstec/base/float.html

http://css.eweb-design.com/0606_lr.html

http://www.t-life.jp/archives/2006/05/post_10.php


記述の一例

<img src=******.gif style="float:right;"/>
あいうえおあいうえおあいうえお

画像の下に文字を回り込ませたくない場合

<img src=******.gif style="float:right;"/>
<div style="border: double 3px #f00;"/>
あいうえおあいうえおあいうえお
</div>

なんにせよ、CSS解説サイトをいくつか見てみることをオススメします。

id:sakurai_ryo

回答ありがとうございます。解説不足で申し訳ありません。

CSS解説サイトはいくつか見ましたが、文字の回りこみは出来ても、枠線だけ周り込まずに画像と重なってしまうため、枠線も回り込む方法がないかと思い質問致しました。

出来れば枠線の横幅は、画像に合わせて自動調整してもらいたいので、widthを指定せずに枠線を回り込ませる事はできないでしょうか。

2007/01/29 16:07:24
id:kn1967 No.4

kn1967回答回数2915ベストアンサー獲得回数3012007/01/29 19:29:08

ポイント40pt

>枠線の横幅は、画像に合わせて自動調整してもらいたい

width指定しなければ画像の大きさに合わせてテキストは回り込みます。


>文字の回りこみは出来ても、

>枠線だけ周り込まずに画像と重なってしまうため、

>枠線も回り込む方法がないかと思い質問致しました。

BOX(四角い枠)しか取り扱えませんので、そうなります。

回避策は残念ながらありません。

http://www6.plala.or.jp/go_west/nextcss/ref/prp/dsp_n_ps/float.h...

ボックスを右か左にフロートさせます。フロートとはつまり、「寄せる」事です。

id:sakurai_ryo

わかりやすい回答ありがとうございました。

2007/01/29 21:56:10

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません