CSS kullanarak görüntü konumlandırma. (biraz jQuery dahil)

Burada biraz CSS sorunum var. Öncelikle benim HTML kodum:

Created Trips 

JQuery kodum görüntüleri değiştirir.

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

Ve son olarak, CSS'm:

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

Görüntünün sayfanın en sağına gitmesini istiyorum, ancak sahip olduğum mevcut CSS'yi kullanarak "küçült" simgesi kalıyor ve "genişle" simgesi hiç görülmüyor. CSS ile oldukça yeniyim, bu yüzden bütün bildiğim stilleri kaldırarak, aslında işe yarıyor. Bu yüzden, büyük olasılıkla problem, CSS ile.

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

Teşekkürler beyler.

1
Bu aptalca bir yorum olabilir, ancak bağlantınıza baktığımda ve simgeyi JSFiddle'daki "Sonuç" aralığının altından kaldırdığımda doğru şekilde değiştiği görülüyordu. jsfiddle.net/CqdRP sayfasına bakın.
katma yazar Eric, kaynak

2 cevap

CSS'yi aşağıya değiştirin, sonra çalışın ...

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

Ayrıca, top: 50px; kodunu css'ye ekledim, böylece jsfiddle result olayı tarafından engellenir.

1
katma
Bu kesinlikle işe yaradı! Nasıl olur? Bu bana dürüst olmak için bir baş ağrısı verdi. Sağol Quincy.
katma yazar Mike Sanchez, kaynak
Aslında, çözümünüzün neden işe yaramadığını da anlayamıyorum. Ama elemanları birleştirmeye çalıştım ve sihirli bir şekilde çalıştı.
katma yazar Quincy, kaynak

I think you want float: right

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

0
katma
Jsfiddle'ınızı denediniz, ancak tıkladıktan sonra her iki düğmeyi de yan yana görüntüler.
katma yazar Mike Sanchez, kaynak