浮动内嵌右上角

我想知道如何让图像在点击时保持在右上角，但让其他元素流动吗？浮动内嵌右上角

img.selected{ 
    height: 600px; 
    width: auto; 
    -webkit-filter: none; 
    float: right; 
    top: 0; 
}

http://jsfiddle.net/vL9RN/3/

当你点击接近列表右侧的图像，他们漂浮正确的，但不要停留在页面的顶部，但在其他的图像，而不是流动。有没有办法用CSS做到这一点？

来源

2013-06-24 Eric Wolf

+1因为小猫 – hjpotter92

那么，你总是希望选定的图像在顶部和所有的缩略图在下面？ – jackweinbender

这里是一个偏袒的工作解决方案：http://jsfiddle.net/vuvz8/ – Gimmy

试试这个：

img.selected{ 
    height: 600px; 
    width: auto; 
    -webkit-filter: none; 
    position: absolute; 
    right: 0; 
    top: 0; 
}

来源

2013-06-24 02:24:46

不起作用，缩略图最终叠加在图像上。我想避免这种情况。 –

我认为这能解决你的问题。检查了这一点:) http://jsfiddle.net/vL9RN/4/

对不起，我使用的JQuery但由于我不是那个熟悉的JavaScript，而无需使用jQuery的

$(function(){ 
    $('img').eq(0).addClass('selected'); 

    $('img').not('selected').click(function(){ 
     $('img.selected').insertBefore($('img').eq($(this).index())).removeClass('selected'); 
     $(this).insertBefore($('img').eq(0)).addClass('selected'); 
    }); 
});

来源

2013-06-24 04:59:56

这不适用于我的设置，我使用ajax从php脚本获取图像列表，并且无法使用“onclick”运行脚本来运行。我知道有办法解决这个问题，但他们超出了我的理解。这个脚本是否可以作为一个onclick函数来运行？ –

只是一个float: left;添加到您的img CSS。

Test Link

另一种方法是，

在一个<div>所有的缩略图，并有“选择” IMG在另一<div>单独<img />。然后，您需要做的所有onClick是更改“选定”img的src属性。

来源

2013-06-24 05:09:47

浮动内嵌右上角

回答

相关问题