人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

1170040056
●拡大する

●質問者: sakurai_ryo
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS テキスト ボックス 画像 記述
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● hamster009
●5ポイント

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


2 ● fragarach
●26ポイント

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;
}
◎質問者からの返答

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

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

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


3 ● eco_clover
●19ポイント

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解説サイトをいくつか見てみることをオススメします。

◎質問者からの返答

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

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

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


4 ● kn1967
●40ポイント

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

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


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

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

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

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

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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ