html - 浮动内联右上角

Question

我想知道如何在单击时让图像留在右上角，但让其他元素围绕它流动？

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

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

当您单击列表右侧的图像时，它们会向右浮动，但不会停留在页面顶部，而是在其他图像下方流动。有没有办法用css做到这一点？

Answer 1

尝试这个：

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

Answer 2

我认为这可以解决您的问题。看看这个:) 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');
    });
});

Answer 3

只需在float: left;您的imgCSS 中添加一个。

测试链接

另一种方法是，

将所有缩略图放在 a<div>中，并将“选定的”img 作为单独<img />的另一个<div>. 然后，您需要做onClick的就是更改src“选定”img 的属性。