Плаваюча вбудована вгору праворуч

Мені було цікаво, як отримати зображення у верхньому правому куті при натисканні, але нехай інші елементи обтікають його?

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

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

Коли ви клацаєте по зображенню праворуч від списку, вони плавають праворуч, але не залишаються на верхній частині сторінки, а натомість перетікають під інші зображення. Чи є спосіб зробити це з css?

1
Нижче наведено часткове робоче рішення: jsfiddle.net/vuvz8
додано Автор Gimmy, джерело
Нижче наведено часткове робоче рішення: jsfiddle.net/vuvz8
додано Автор Gimmy, джерело
Отже, ви завжди бажаєте, щоб вибране зображення знаходилося у верхній частині, а всі ескізи під ним?
додано Автор jackweinbender, джерело
Отже, ви завжди бажаєте, щоб вибране зображення знаходилося у верхній частині, а всі ескізи під ним?
додано Автор jackweinbender, джерело
Отже, ви завжди бажаєте, щоб вибране зображення знаходилося у верхній частині, а всі ескізи під ним?
додано Автор jackweinbender, джерело
@Gimmy Я не бачу ніякої різниці від твої до моєї?
додано Автор Eric Wolf, джерело
@Gimmy Я не бачу ніякої різниці від твої до моєї?
додано Автор Eric Wolf, джерело
@Gimmy Я не бачу ніякої різниці від твої до моєї?
додано Автор Eric Wolf, джерело

8 Відповіді

Просто додайте float: left; до вашого img css.

Посилання на тестування

Альтернативним підходом буде,

have all your thumbnails in a <div>, and have the "selected" img as a separate in another <div>. Then, all you'd need to do onClick is change the src property of the "selected" img.

0
додано

Просто додайте float: left; до вашого img css.

Посилання на тестування

Альтернативним підходом буде,

have all your thumbnails in a <div>, and have the "selected" img as a separate in another <div>. Then, all you'd need to do onClick is change the src property of the "selected" img.

0
додано

Спробуйте це:

img.selected{
    height: 600px;
    width: auto;
    -webkit-filter: none;
    position: absolute;
    right: 0;
    top: 0;
}
0
додано
Не працює, ескізи закінчуються накладеними на зображення. Я б хотів цього уникнути.
додано Автор Eric Wolf, джерело

Спробуйте це:

img.selected{
    height: 600px;
    width: auto;
    -webkit-filter: none;
    position: absolute;
    right: 0;
    top: 0;
}
0
додано
Не працює, ескізи закінчуються накладеними на зображення. Я б хотів цього уникнути.
додано Автор Eric Wolf, джерело

Спробуйте це:

img.selected{
    height: 600px;
    width: auto;
    -webkit-filter: none;
    position: absolute;
    right: 0;
    top: 0;
}
0
додано
Не працює, ескізи закінчуються накладеними на зображення. Я б хотів цього уникнути.
додано Автор Eric Wolf, джерело

I think this solves your problem. Check this out :) 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');
    });
});
0
додано
Це не працює з моїм налаштуванням, я отримую список зображень з скрипту PHP з використанням ajax і не можу запустити скрипти без використання "onclick". Я знаю, що є способи виправити це, але вони виходять за межі мого розуміння. Чи може цей сценарій бути адаптованим для роботи як функція onclick?
додано Автор Eric Wolf, джерело

I think this solves your problem. Check this out :) 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');
    });
});
0
додано
Це не працює з моїм налаштуванням, я отримую список зображень з скрипту PHP з використанням ajax і не можу запустити скрипти без використання "onclick". Я знаю, що є способи виправити це, але вони виходять за межі мого розуміння. Чи може цей сценарій бути адаптованим для роботи як функція onclick?
додано Автор Eric Wolf, джерело

I think this solves your problem. Check this out :) 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');
    });
});
0
додано
Це не працює з моїм налаштуванням, я отримую список зображень з скрипту PHP з використанням ajax і не можу запустити скрипти без використання "onclick". Я знаю, що є способи виправити це, але вони виходять за межі мого розуміння. Чи може цей сценарій бути адаптованим для роботи як функція onclick?
додано Автор Eric Wolf, джерело