Позиционирование изображения с использованием CSS.(немного JQuery участвует)

Question

Здесь немного проблемы с CSS.Во-первых, мой HTML-код:

<p>
<span id="tripTitle">Created Trips</span>&nbsp;
<span class="expandicon" style="display:none;"><span class="flip"><img class="expand" src="http://i228.photobucket.com/albums/ee190/micmofo/expand1.png" /></span></span>
<span class="shrinkicon"><span class="flip"><img class="shrink" src="http://i228.photobucket.com/albums/ee190/micmofo/shrink1.png" /></span></span>
</p>

Мой код jQuery переключает изображения.

$(function(){
    $('span.expandicon').click(function(){
        $(this).toggle().next('span.shrinkicon').toggle();    
    });
    $('span.shrinkicon').click(function(){
        $(this).toggle().prev('span.expandicon').toggle();        
    });
})

И, наконец, мой CSS:

.expand, .shrink { 
    position: absolute;
    right:1px;
}

Я хочуизображение, чтобы перейти к крайней правой части страницы, но с использованием текущего CSS, который у меня есть, значок «сжиматься» остается, и поэтому значок «развернуть» вообще не виден.Я довольно новичок в CSS, поэтому все, что я знаю, это удаление стилей, это на самом деле работает.Поэтому, скорее всего, проблема в CSS.

Я предоставил jsfiddle для желающих помочь.http://jsfiddle.net/vfpM5/

Спасибо, ребята.

Answer 1

Измените CSS на ниже, затем работайте ...

.expandicon, .shrinkicon{ 
    position: absolute;
    right:1px;
}

Кроме того, я добавил top:50px; к CSS, чтобы он был заблокирован jsfiddle result.

Answer 2

Я думаю, что вы хотите float: right

Обновленная скрипка: http://jsfiddle.net/vfpM5/1/