css - 为什么不在绝对定位的 child 身上定义宽度会出现异常行为？

Question

基本上，我在一个相对容器中有 3 个绝对定位的元素，其中一个带有 left: 100%。 (下一个)和一个 left: -100% (上一张图)。它们使用 transition 在可用位置之间自动转换属性(property)。这样的最终结果可以看here .

<div id="slideshow">
    <article>
        <img>
    </article><article>
        <img>
    </article><article>
        <img>
    </article>
</div>
<style>
    div#slideshow   { position: relative; overflow: hidden }
    img             { width: 100%; height: auto }
    article         { width: 100%; position: absolute; transition: left 1s }
    article.current { left: 0 }
    article.prev    { left: -100% }
    article.next    { left: 100% }
</style>

(This 是未应用 overflow: hidden 的结果，以查看幻灯片的效果。)

如您所见，<img> s 响应他们的 parent ，<article> .我知道 block 元素总是占用可用宽度，所以我认为我不必声明它，但如您所见，我必须指定 width: 100%在 <article> 上， 也。如果我不这样做会怎样？ Something interesting, I'd say .

.prev <img>比其他的大两倍，.next <img>以 0x0 大小呈现。什么？您清楚地看到所有图像都应具有相同的尺寸:100% 宽度和自动高度。

我想了解的是；为什么 CSS 会像现在这样工作？我发现这个结果非常出乎意料，所以我真的很想讨论为什么结果会返回它所做的，这样我就可以更好地理解 CSS 值的底层组件实际上是如何工作的。

Answer 1

您的问题不在于图片本身，而在于文章。

是文章元素决定了维度，图像从中获取维度。

文章的宽度没有设置。如果没有，并且存在 left 语句，则假定值为 right 0px。所以，当 left 为 0 时，宽度为容器的 100%，当 left 为 -100% 时，宽度为 200%，当 left 为 100% 时，宽度为 0。

如何解决？

1. 为文章添加宽度:100%。 - 直接解决方案。
2. 不是移动具有 left 属性的文章，而是使用转换:translateX(-100%);您不会遇到左转带来的问题，而且性能更高