浮子-左不工作相对位置

Question

我正试着把我的图像放在div的左边。我试图移动图像或div的任何操作都无法工作。为什么图像卡在中间？

我能够使用flexbox实现这一点，但由于Nextjs图像组件冲突，我不得不切换到相对位置。在Image标记中，您将看到“布局=‘填充’”，这是我问题的根源，但我无法摆脱这段代码

<div className="relative w-full bg-blue p-4 my-4 rounded-2xl lg:basis-5/12">
    <Image className="float-left mr-4" src={"/"+icon} layout={"fill"} objectFit={"contain"} />
    <div>
        <h3>{ title }</h3>
        <p>
            { paragraph }
        </p>
    </div>
</div>

我现在得到的是：

​

Answer 1

float不适用于layout='fill'。将其改为“固定的”或“内在的”。我建议将Image标记包装到div中，并使div浮动。试试这样的东西。

<div className="bg-blue relative my-4 w-full rounded-2xl p-4 lg:basis-5/12">
      <div className="float-left mr-4">
        <Image src={'/' + icon} layout={'fixed'} height="120" width="120" />
      </div>
      <div>
        <h3>{title}</h3>
        <p>{paragraph}</p>
      </div>
    </div>

并即兴发挥。您甚至不需要使用浮点数。你可以用flex实现同样的目标。因此，如果使用float并不重要，您可以这样做

<div className="bg-blue my-4 flex w-full gap-4 rounded-2xl p-4 lg:basis-5/12">
      <Image src={'/' + icon} layout={'intrinsic'} height="120" width="120" alt="" />
      <div>
        <h3>{title}</h3>
        <p>{paragraph}</p>
      </div>
    </div>