html - How to position an image in the bottom right corner of a frame?

Question

On the this page (Roman Umismatics), I would like to position the yellow 'bid' button at the bottom right of the individual frames.

Current code

<p><a href="<?= $product->page_url() ?>"><img border="0" alt="Bid" src="/themes/roma/resources/img/bid.png" style="margin:0" /></a></p>

What code do I need to change to do achieve this?

Answer 1

コンテナ要素を作る

.breakl

position: relative;

入札ボタンを押す

position: absolute;
right: 0;
bottom: 0;

Answer 2

あなたのhtmlは次のとおりです。

<p><a href="/auction/lot/0003" class="actionBtn"><img border="0" alt="Bid" src="/themes/roma/resources/img/bid.png" style="margin:0;"></a></p>

CSS:

.actionBtn{float:right;}

Answer 3

このチュートリアルは次のことに役立ちます。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

親を position: relative に設定すると、そのコンテナに関連して、子に絶対配置を使用できます。

<div class="parent">
 <a class ="child" href="<?= $product->page_url() ?>"><img border="0" alt="Bid" src="/themes/roma/resources/img/bid.png" style="margin:0" /></a>
</div>

あなたのCSSで：

.parent { position:relative; }
.child { display:inline-block; position:absolute; bottom:0; right:0; }

Answer 4

p{
   float:right:
   margin-top:10px;
 }

Answer 5

「float:right;」を追加するだけです。画像に。