在下一个js中定位图像

Question

我想把我的图片放在页面的最右边，我尝试用position: absolute和right: 0进行修改。 我也尝试将父位置设置为相对位置，将图像位置设置为绝对位置，但为什么它不起作用？

在我的 jsx 文件中

        <div className={styles.images}>
          <Image
            src="/cloud.svg"
            alt="Picture of the author"
            layout="fill"
            className={styles.cloud}
          />
          <Image
            src="/kuil.svg"
            alt="Picture of the author"
            height={200}
            width={600}
            layout="intrinsic"
            className={styles.building}
          />
        </div>

也在我的 css 文件中。

.images {
    position: relative;
    margin: 90px auto 0 auto;
}

.building {
    position: absolute;
    top: 0;
    right: 0 !important;
    bottom: 0 !important;
}

Answer 1

我也遇到过同样的问题。编译时的Image标签将img标签与样式位置相对的div标签包裹起来。

解决方法是简单地用div包裹Image标签，并在div中添加classname。

查看codesandbox