html - <span> 包含 3 个重叠图像，宽度是必要宽度的 3 倍

Question

我有一个元素，包含三个重叠的图像。检查 Chrome 中的元素显示:

<span id=​"span1">​
   <img id=​"img1" src=​"images/​progressbar.gif" width=​"120" style=​"position:​ relative;​ z-index:​ 3;​">​
   <img id=​"img2" src=​"images/​progressbar.gif" style=​"width:​ 120px;​ height:​ 12px;​​ position:​ relative;​ left:​ -120px;​ z-index:​ 2;​">​
   <img id=​"img3" src=​"images/​progressbar.gif" style=​"width:​ 120px;​ height:​ 12px;​ position:​ relative;​ left:​ -240px;​ z-index:​ 1;​">​
</span>​

重要的一点是，后两张图片被赋予了相对位置，将它们向左移动，使它们与第一张完美重叠。但是跨度本身仍然是 360 像素宽(每个图像 3 x 120 像素)。那么，如何在保持跨度宽度紧紧围绕图像的同时实现这种效果呢？

谢谢!

Answer 1

这里发生的是浏览器的布局引擎执行初始布局(在考虑您的相对定位之前)，计算 span的宽度(这是您的图像宽度的 3 倍)，然后将图像移动到您指定的位置。

显而易见的解决方案是同时执行 <span id="span1" style="width:120px;"> .我认为这在您的情况下是可以接受的，因为 120px已经需要指定部分(及其倍数)来实现布局。

另一个解决方案是给出 position: absolute除了第一个图像之外的所有图像(您还需要将 position: relative 给 <span> )。这将从布局中删除它们并允许您的 span紧贴所有剩余内容(即只有一张图片)。在这种情况下，虽然我不确定 z-index您的图像的属性(具有不同的 position )会相互作用。可能就好了。 :-)

编辑:通过使用最后一个解决方案(并假设没有 z-index 问题)，您可以在不指定 120px 的情况下实现所需的布局。任何地方。这可能很重要，所以请牢记。