divの右下にimgを配置する方法

alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg divの右下にimgを配置する方法

これは私がしたいことです。ディビジョンの中にテキストがあり、右下隅にimgがあります。 divの高さは24pxで安定していますが、長さは不明で、複数のdivが連続して存在する可能性があります。

2009-09-25 Markus

これは絵のための画像です！ –

'background-image'を試してみることもできます。 – Gumbo

関連：[DIVの四隅に画像を添付する]（http://stackoverflow.com/questions/17306087/attach-images-on-all-four-corner-of-div）＆[コーナー画像を追加するスマートな方法4つのコーナーすべてでDIVの境界線に]（http://stackoverflow.com/questions/6467063/smart-way-to-add-corner-image-to-div-border-on-all-four-corners）。 –

これを行う方法はいくつかあります。最も単純：

div.outer { position: relative; height: 24px; } 
div.outer img { position: absolute; right: 0; bottom: 0; }

と

<div class="outer"> 
<img src="...."> 
</div>

今、それが問題である通常の流れの外にそれを取るあなたがその周り/フロートをラップするために、他のコンテンツたいです。その場合、実際に画像の高さを知り、それに応じて適切なトリックを適用する必要があります。

Making the absolute, relativeで始まります。

画像は、例えば、10個のピクセルの高さならば、あなたはこれを試みることができる：

div.outer { height: 24px; } 
div.outer { float: right; margin-top: 14px; }

もちろん14pxが24ピクセルから来ている - 10pxの。しかし、それが達成しようとしていることを満足させるかどうかはわかりません。

出典

2009-09-25 09:54:04 cletus

so defenetly thx - 約1番目のコード - ちょうど底：0と右の位置付け – bresleveloper

私はCletusの答えをコメントできませんが、 "px"を "right：0; bottom：0;"に追加する必要があります。それはそうです：右：0px;下：0px;私の場合は、 '' px'という接尾辞なしで '0'とは違うものを置くとうまくいきません。 – Jxadro

あなたのソリューションは、背景画像です。

<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>

divのパディングも調整する必要があります。必要に応じて、divの内容が写真と重ならないようにする必要があります。

出典

2009-09-25 10:16:08 n1313

画像の周りにテキストを浮かべたい場合は、その両方の回答が間違っています。どちらもテキストをイメージの上に移動させます。私は何時間も探していて、本当の答えは存在しないようです。 This articleは、テキストをラップしようとすると、なぜこれらの答えがうまくいかないのかをより明確に説明しています。

出典

2013-11-12 19:45:29

divの右下にimgを配置する方法

答えて

関連する問題