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; css添加img。

Test Link

另一种方法是，

将所有缩略图放在<div>中，并将“已选中”img作为另一个<img />中的单独<div>。然后，您需要执行的所有操作onClick都会更改“已选择”图片的src属性。

浮在右上方

3 个答案: