CSSを使用した画像の配置。 (少しjQueryが関わっている)

ここにCSSの問題が少しあります。まず、私のHTMLコード:

Created Trips 

私の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だ。

I've provided a jsfiddle for those willing to help. http://jsfiddle.net/vfpM5/

みんなありがとう。

1
これは愚かなコメントかもしれませんが、あなたのリンクを見て、JSFiddleの「Result」スパンの下からアイコンを移動させたとき、正しく切り替えるように見えました。 jsfiddle.net/CqdRP を参照してください。
追加された 著者 Eric,

2 答え

下の方にCSSを変更して作業してください...

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

また、 top:50px; をCSSに追加して、jsfiddle result でブロックされるようにしました。

1
追加された
これは絶対にうまくいった!どうして?これは私に正直な頭痛を与えました。ありがとう、クインシー。
追加された 著者 Mike Sanchez,
実際には、なぜあなたのソリューションがうまくいかなかったのかもわかりません。しかし、私は要素を統一しようとし、それは魔法のように働いた。
追加された 著者 Quincy,

I think you want float: right

Updated fiddle: http://jsfiddle.net/vfpM5/1/

0
追加された
あなたのjsfiddleを試してみましたが、クリックすると両方のボタンが並んで表示されます。
追加された 著者 Mike Sanchez,