ここから本文です

枠線をつけたDIVの中に画像を入れて、高さがはみ出ないようにしたいのですが

ich********さん

2012/4/315:30:29

枠線をつけたDIVの中に画像を入れて、高さがはみ出ないようにしたいのですが

例えば下記のようなソースでページを作ったとします。

<DIV style="boder:solid 1px;">
<img src="hogehoge.jpg" align="right">
本文本文本文~~~
</DIV>


枠線で囲んだエリア(DIV要素)内の右に画像を表示させて
左側に文章を表示させたいのですが
文章の行数が少なく高さが、画像の高さより短い場合
画像が枠線から下にはみ出てしまいます。

DIVの高さを、文章の行数に合わせるのではなく
画像の高さに合わせることはできますか?
(文章の行数が高い場合は文章に合わせるようにできたらなおありがたいです)。

閲覧数:
1,783
回答数:
1

違反報告

ベストアンサーに選ばれた回答

hei********さん

2012/4/315:47:58

clearfix を使用した例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<style type="text/css">
/* For modern browsers */
.cf:before,
.cf:after {
content: "";
display: table;
}

.cf:after {
clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom: 1;
}
</style>
</head>
<body>
<div style="border:solid 1px;" class="cf">
<img src="#" style="float:right" width="100" height="100">
本文本文本文~~~
</div>
</body>
</html>

質問した人からのコメント

2012/4/8 23:20:39

ありがとうございました!
バッチリ表示されました。

Clearfixって使ったことなかったのですが
これを機に勉強してみたいと思います。

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

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる