CSS Div Положение наложения изображений

Я заявил о создании простого сайта MVC 4, который можно увидеть здесь: проблемный сайт

Я бы хотел, чтобы чередующиеся изображения появлялись справа от абзаца в синей рамке.

Для чередования изображений я использую авторы исходного JS отсюда: JQuery

<script type="text/javascript">
jQuery(document).ready(function() {
    $('.fadein img:gt(0)').hide();
    setInterval(function () {
        $('.fadein :first-child').fadeOut()
           .next('img').fadeIn()
           .end().appendTo('.fadein');
    },
      3000);
});
</script>

Разметка из моего index.cshtml выглядит следующим образом:

<div id="intro">
    <p>
    Don't let memories fade - preserve them for generations to come.<br />
    Yorkshire Image Scanning can create perfect digital copies of your photographs, stored on DVD or USB memory stick.
    The access the digital images simply insert into a DVD player and a slideshow will start to run. 
    Alternatively, the images can be copied to your PC, iPad, smartphone etc and backed up using any normal method such as external hard disk or DVD copies or cloud storage.
    Of course, digital images are so much easier to share than old photographs. Upload them to facebook and let distant friends share your memories!
    </p>
</div>
<div class="fadein">
    <img src="~/Content/img/old_photos/1.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/2.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/3.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/4.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/5.jpg" alt="Old Photos" />
</div>

CSS выглядит следующим образом:

#intro {
   float: left;
   width: 50%;
}

.fadein { width:300px; height:300px; }
.fadein img { position:absolute; left:0; top:0; }

Может ли кто-нибудь посоветовать, что мне нужно сделать, чтобы переместить изображения? Кажется, что если у меня нет.fadin img с позицией:absolute, то я получаю возможность видеть каждое из изображений одновременно, когда jQuery переключается на следующее изображение. Я не знаю, как установить все изображения в положение относительно предыдущего div, чтобы каждое изображение перекрывало предыдущее?

Источник

2 ответа

Решение

Сделай свой .fadein относительный и плавать правильно, и это должно дать вам то, что вы хотите.

РЕДАКТИРОВАТЬ: Благодаря Илье Стрельцыну Вы бы лучше использовать margin-left: auto на ваше .fadein дела. Это предотвратит разрушение родительского элемента при использовании float.

Источник

Ваш .fadein Решение должно работать с position:relative;

Источник
Другие вопросы по тегам