reactjs 如何在移动的和平板电脑中使用Tailwind CSS将图像略高于卡片

7xllpg7q  于 2022-12-29  发布在  React
关注(0)|答案(2)|浏览(171)

第一节第一节第一节第一节第一次
注意:它在桌面上运行良好,但在移动的和平板电脑上不工作。希望在StackOverflow社区获得帮助。

<div>
          <div className='justify-center mt-16 md:pb-6 lg:pb-0 lg:flex lg:mx-36 md:mx-auto rounded-2xl bg-neutral-800'>
            {/* Column 1 */}
            <div className="-mt-10 lg:relative">
              <Image
                src="/images/review/image-jeremy-large@2x.png"
                width={290}
                height={290}
                alt="people"
                className="w-56 mx-auto rounded-xl lg:w-72"
              />
            </div>
    
            {/* Column 2 */}
            <div>
              <Image
                src="/images/review/patternCurveDiagonalLine.png"
                width={60}
                height={60}
                alt="Curve Diagonal Line"
                className="mx-auto mt-10 lg:mt-32 lg:mx-14"
              />
            </div>
            {/* Column 3 */}
            </div>
          </div>
        </div>
xzlaal3s

xzlaal3s1#

检查Tailwind关于位置的文件。
有一节“绝对定位元素”,其中描述了相同的事情,你想做:https://tailwindcss.com/docs/position#absolutely-positioning-elements

s4n0splo

s4n0splo2#

您已经在父div中定义了mt-16。因此-mt-10mt-16剪切,因此您可以在移动的中看到16 - 10 = 6,即mt-6
要解决这个问题,请删除父div中的mt-16
变更

<div className='justify-center mt-16 md:pb-6 lg:pb-0 lg:flex lg:mx-36 md:mx-auto rounded-2xl bg-neutral-800'>

<div className='justify-center md:pb-6 lg:pb-0 lg:flex lg:mx-36 md:mx-auto rounded-2xl bg-neutral-800'>

相关问题