css - 如何结合相对和绝对定位来 float 元素

在以下代码段中：

<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幻灯片替换此图像，该幻灯片需要将多个图像以相对位置包装在一个跨度中，而这些图像则绝对定位在该跨度内，本质上形成了一个“堆叠”的图像：

<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的右侧，就像第一个片段中的单个图像一样。我该怎么做呢？在过去的三个小时中，我一直在与之抗争，到目前为止，我所做的一切都使我的布局变得乏味。

我所忽略的一切邪恶的名义是什么？

最佳答案

根据对您问题的理解，我创建了以下小提琴。

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

关于css - 如何结合相对和绝对定位来 float 元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36154757/