next.js - 我想使用下一个/图像来填充 div 容器中的一半宽度

Question

我正在学习 nextjs 和 tailwind css。

我想使用下一个/图像填充一半宽度。

但是，它使用全宽

function Slider() {
  return (
    <div className="w-full h-screen flex  relative">
      <div className="Arrow left-[10px]">
        <ArrowLeftOutlined />
      </div>
      <div className="Wrapper h-full flex">
        <div className=" w-screen h-screen flex items-center">
          <div className="ImgContainer h-full flex-1 ">
            <Image
              className=""
              src=""
              layout="fill"
            />
          </div>
          <div className="Info flex-1 p-[50px]"></div>
        </div>
      </div>
      <div className="Arrow right-[10px]">
        <ArrowRightOutlined />
      </div>
    </div>
  );
}

这是我的代码，请告诉我..

Answer 1

position: relative为包装 div设置

function Slider() {
  return (
    <div className="w-full h-screen flex  relative">
      <div className="Arrow left-[10px]">
        <ArrowLeftOutlined />
      </div>
      <div className="Wrapper h-full flex">
        <div className=" w-screen h-screen flex items-center">
          <div className="ImgContainer h-full flex-1 relative">
            <Image
              className=""
              src=""
              layout="fill"
            />
          </div>
          <div className="Info flex-1 p-[50px]"></div>
        </div>
      </div>
      <div className="Arrow right-[10px]">
        <ArrowRightOutlined />
      </div>
    </div>
  );
}