如何将元素与相对和绝对定位相结合

时间:2016-03-22 12:44:39

标签: css position css-float absolute relative

在以下代码段中:

<div style="width: 600px; margin-left: auto; margin-right: auto;">
  <h1>Content goes here</h1>
  <img src="img1.jpg" style="float: right; margin-right: 1em;">
</div>

图像浮动到页面的右侧。现在我想用jQuery幻灯片替换这个图像,这需要在相对定位的跨度中包裹多个图像,而图像绝对定位在跨度内,基本上形成一个&#34;堆栈&#34;彼此重叠的图像:

<div style="width: 600px; margin-left: auto; margin-right: auto;">
  <h1>Content goes here</h1>
  <span style="position: relative;">
    <img src="img1.jpg" style="position: absolute; left: 0px; top: 0px;">
    <img src="img2.jpg" style="position: absolute; left: 0px; top: 0px;">
    <img src="img3.jpg" style="position: absolute; left: 0px; top: 0px;">
  </span>
</div>

(jQuery代码显然会切换img1,img2,img3等的可见性。)

小提琴here

我需要将幻灯片放映(即包含图像堆栈的跨度)浮动到父容器div的右侧,就像第一个片段中的单个图像一样。我该怎么做呢?在过去的三个小时里我一直在与它斗争,到目前为止我所做的一切都导致我的布局被塞了。

我所忽视的所有那些不圣洁的名字是什么?

2 个答案:

答案 0 :(得分:0)

根据我对你的问题的理解,我创造了以下小提琴。

https://jsfiddle.net/Rukhsana/o0524475/8/  1.先改变...保证金权利:6em;  2.需要在src,style

中添加密切引号
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg style="position: absolute;>
  <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" style="position: absolute;>

答案 1 :(得分:0)

在解决这个问题的时间超过了我应该的时间后,我现在意识到我想做的事情是不可能的。我试图浮动一个跨度而不用我的布局,但是我不愿意给它分配一个固定的宽度和高度,期望它是它所包含的图像所需的宽度和高度。在客户端呈现跨度时,这是未知的,因此浏览器无法在现有布局中正确呈现所有内容。

所以我作为一种解决方法而已经完成的工作有点像黑客。粗略但有效,我将所有图像预加载到缓存中,只显示一个,并更改图像源以实现幻灯片放映功能。

HTML:

<p>
<img src="images/shop3.jpg" style="float:right;" class="fadeslide" />
<img src="images/shop1.jpg" style="display: none;" /> <!-- preload -->
<img src="images/shop2.jpg" style="display: none;" /> <!-- preload -->
<img src="images/shop4.jpg" style="display: none;" /> <!-- preload -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat, et cetera...</p>

使用Javascript:

$( document ).ready(function() {
  imgR = new Array ("images/shop1.jpg", "images/shop2.jpg",
                    "images/shop3.jpg", "images/shop4.jpg");
  var imgIdx = 0;
  setInterval (function () {
    $('img.fadeslide').fadeTo(500, 0.1, function() {
      $(this).attr('src', imgR[imgIdx]).bind('onreadystatechange load',function() {
          if (this.complete)
            $(this).fadeTo(500, 1);
        });
      imgIdx++;
      if (imgIdx > (imgR.length - 1))
        imgIdx = 0;
    });
  }, 5000);
});

这将允许我按照惯例处理图像,根据布局中的其他图像对齐它们。也许不是最简单的方法,但它解决了这个问题。