float-left 在相对位置不工作

Question

我试图将我的图片放在 div 的左侧。我试图移动图像或 div 的任何操作都失败了。为什么图像卡在中间？

我能够使用 flexbox 实现这一点，但由于 Nextjs Image 组件冲突而不得不切换到相对定位。在图片标签中，您会看到“布局='fill'”，这是我问题的根源，但我无法摆脱那段代码

<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'。将其更改为 'fixed' 或 'intrinsic'。我建议将 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>

float-left 在相对位置不工作

float-left not working in relative position

css

css-position

next.js

tailwind-css