CSS div位置叠加图片 [英] CSS div position overlay images

问题描述

我已经说过创建一个简单的MVC 4网站，可以在这里看到：问题网站

我希望交替的图片显示在蓝色边框内的段落的右边。

我在这里使用作者的初始JS： JQuery

 < script type =text / javascript> 
 jQuery（document）.ready（function（）{
 $（'。fadein img：gt（0）'）。hide（）; 
 setInterval b $（'。fadein：first-child'）。fadeOut（）
 .next（'img'）。fadeIn（）
 .end（）。appendTo（'。fadein'）; 
}，
 3000）; 
}）; 
< / script> 
  

我的index.cshtml的标记如下：

 < div id =intro> 
" p> 
不要让记忆褪色 - 保存他们几代人。< br /> 
约克郡图像扫描可以为您的照片创建完美的数字副本，存储在DVD或USB记忆棒上。 
访问数字图像只需插入到DVD播放器和幻灯片将开始运行。 
或者，图像可以复制到您的PC，iPad，智能手机等，并使用任何常规的方法，如外部硬盘或DVD副本或云存储备份。 
当然，数字图像比旧照片更容易分享。将他们上传到Facebook，让遥远的朋友分享你的记忆！ 
< / p> 
< / div> 
< div class =fadein> 
< img src =〜/ Content / img / old_photos / 1.jpgalt =旧照片/> 
< img src =〜/ Content / img / old_photos / 2.jpgalt =旧照片/> 
< img src =〜/ Content / img / old_photos / 3.jpgalt =旧照片/> 
< img src =〜/ Content / img / old_photos / 4.jpgalt =旧照片/> 
< img src =〜/ Content / img / old_photos / 5.jpgalt =旧照片/> 
< / div> 
  

CSS如下：

  #intro {
 float：left; 
 width：50％; 
} 
 
 .fadein {width：300px; height：300px; } 
 .fadein img {position：absolute; left：0; top：0; } 
  

任何人都可以告诉我需要做什么来移动图像？看来，除非我有.fadin img的位置：绝对然后我得到看到每个图像在同一时间，当jQuery flicks到下一个图像。

解决方案

p>使您的 .fadein 相对和浮动右，并应该给你想要的。

编辑：
感谢 Ilya Streltsyn
您最好在 margin-left：auto > .fadein div。这将防止父项在使用浮动广告时折叠。

I have stated creating a simple MVC 4 Site which can be seen here: problem site

I would like the alternating images to appear to the right of the paragraph within the blue border.

To alternate the images I am using the authors initial JS from here: 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>

The markup from my index.cshtml is as follows:

<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>

The CSS is as follows:

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

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

Could anyone please advise what I need to do to move the images? It seems that unless I have the .fadin img with a position:absolute then I get to see each of the images at the same time when jQuery flicks to the next image. I don't know how to set the all images to a position relative to the previous div so that each image overlays the previous?

解决方案

Make your .fadein relative and float right and that should give you what you want.

EDIT: Thanks to Ilya Streltsyn You'd be better off using margin-left: auto on your .fadein div. This would prevent the parent from collapsing when using floats.

这篇关于CSS div位置叠加图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！