React/Tailwind 幻灯片高度问题

Question

我是 Web 开发新手，正在学习使用 React 和 Tailwind。

我正在尝试做“关于我们”部分，应该按以下方式制作。
有两个组件：每秒自动更改的图像幻灯片和带有一些文本的段落。

两者应该这样排列：

1. 对于大屏幕，一行中幻灯片位于第一列（左），段落位于第二列（右）。
2. 对于小于大屏幕的屏幕，应为 1 列和 2 行，幻灯片位于顶部，段落位于底部。

这是我目前拥有的代码。它可以工作，但有一个问题：似乎对于情况 2，它没有正确理解幻灯片的高度，因此段落文本位于幻灯片图像的顶部。

有什么办法可以解决这个问题吗？谢谢。

  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    const interval2 = setInterval(() => {
      setCurrentSlide((prevSlide) =>
        prevSlide === images.length - 1 ? 0 : prevSlide + 1
      );
    }, 3000);

    return () => {
      clearInterval(interval2);
    };
  }, []);

<div className="grid grid-cols-1 grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 w-full">
    {/* Images */}
    <div className="images lg:order-1" data-aos="fade-up">
        <div className="relative">
            {images.map((image, index) => (
                <div
                    key={image.id}
                    className={`absolute top-0 left-0 w-full h-full transition-opacity duration-1000 ${
                        index === currentSlide ? "opacity-100" : "opacity-0"
                    }`}
                >
                    <img src={image.img} className="rounded-md" alt="" />
                </div>
            ))}
        </div>
    </div>

    {/* About us */}
    <div className="lg:order-2 lg:mt-0 mx-auto space-y-4 lg:w-3/4 text-black" data-aos="fade-up">
        <h2 className="text-2xl font-semibold"> Title</h2>
        <p className="text-justify lg:text-start">
            About us 1.
        </p>
        <p className="text-justify lg:text-start">
           About us 2.
        </p>
        <p className="text-justify lg:text-start">
           About us 3.
        </p>
    </div>
</div>

Answer 1

div.relative

元素具有

0

高度，因为里面的所有元素都有

position: absolute

。如果所有图像的大小相同，您可以考虑not将

position: absolute

应用于第一张图像。然后，这会给出布局矩形间距，确保文本在滑块下方流动。

const { useEffect, useState } = React;

const images = [
  { img: 'https://picsum.photos/1920/1080' },
  { img: 'https://picsum.photos/1920/1080?' },
  { img: 'https://picsum.photos/1920/1080?0' },
];

function App() {
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    const interval2 = setInterval(() => {
      setCurrentSlide((prevSlide) =>
        prevSlide === images.length - 1 ? 0 : prevSlide + 1,
      );
    }, 3000);

    return () => {
      clearInterval(interval2);
    };
  }, []);

  return (
    <div className="grid grid-cols-1 grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 w-full">
      {/* Images */}
      <div className="images lg:order-1" data-aos="fade-up">
        <div className="relative">
          {images.map((image, index) => (
            <div
              key={image.id}
              className={`top-0 left-0 w-full h-full transition-opacity duration-1000 ${
                index === currentSlide ? 'opacity-100' : 'opacity-0'
              } ${index > 0 ? 'absolute' : ''}`}
            >
              <img src={image.img} className="rounded-md" alt="" />
            </div>
          ))}
        </div>
      </div>

      {/* About us */}
      <div
        className="lg:order-2 lg:mt-0 mx-auto space-y-4 lg:w-3/4 text-black"
        data-aos="fade-up"
      >
        <h2 className="text-2xl font-semibold"> Title</h2>
        <p className="text-justify lg:text-start">About us 1.</p>
        <p className="text-justify lg:text-start">About us 2.</p>
        <p className="text-justify lg:text-start">About us 3.</p>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app"></div>