CSS положение DIV Наложенные изображения

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

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

чередовать изображения я использую автор начальные 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, чтобы каждое изображение накладывалось на предыдущее?

источник

2013-07-03 Rob Bowman

Ответ, как именно вы описали марку '.fadein' положение относительно, и он будет работать. – DickieBoy

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

EDIT: Благодаря Илья Streltsyn Вы бы лучше использовать margin-left: auto на вашем .fadein дел. Это предотвратит свертывание родителя при использовании поплавков.

источник

2013-07-03 09:16:57

Другой вариант перемещения div справа - установка margin-left: auto. –

На самом деле, крайний левый был бы лучше, чем плавающий элемент, поскольку это позволило бы избежать разваливания родительского div - я об этом не думал. –

Спасибо, ребята, отлично работает. Вот обновленный CSS .fadein {position: relative; Маржа налево: авто; ширина: 300px; высота: 300px; } .fadein img {position: absolute; Слева направо: 0; верх: 0; } –

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

источник

2013-07-03 09:18:35

CSS положение DIV Наложенные изображения

ответ

Смежные вопросы