忽略容器中容器的 TailwindCSS 高度？

Question

我希望工作机会位于标题下方，但标题本身仍然以高度为中心。谁能帮我解决这个问题吗？

这是一个屏幕截图：

这是一个没有+绘图的地方：

我已经用以下代码尝试过

> <div class="flex 2xl:flex-row justify-start items-center w-full
> md:w-9/12 2xl:w-full 2xl:justify-center min-h-[38rem] h-[88vh]
> relative">
>     <div class="space-y-8 xl:ml-4 2xl:min-w-[52rem] 2xl:w-[62rem]" id="left">
>         <img class="w-6 xl:w-8 transition-all delay-100 ease-in-out" src="Vector.svg" alt="Fluxify Vector">
>         <div class="space-y-3">
>             <h2 class="font-syne font-medium text-[1.435rem] leading-[1.525rem] lg:text-[1.735rem] lg:leading-[1.825rem]
> 2xl:text-[1.835rem] 2xl:leading-[2.225rem] line-clamp-3
> 2xl:line-clamp-2 transition-all delay-100 ease-in-out">Deine Karriere
> bei uns - Bewerbe Dich noch heute!</h2>
>             <p class="font-sura text-md leading-4 md:text-lg 2xl:text-lg text-[#8A8A8A] md:leading-5 2xl:leading-5
> line-clamp-4">Bist du Softwareentwickler, Webseitenentwickler,
> Designer, Konzeptentwickler, Systemadministrator oder kannst du einen
> anderen Bereich der IT abdecken? Bewirb Dich bei uns - wir bieten Dir
> als Freelancer Kunden & Aufträge mit fairer Bezahlung.</p>
>             <div class="">
>                 <x-jobs.offers/>
>             </div>
>         </div>
>     </div>
>     <div class="2xl:flex justify-end w-full hidden" id="right">
>         <div class="select-none relative 2xl:left-44">
>             <img class="rounded-[1.56rem] min-w-[28.5rem] 2xl:max-w-[38rem]" src="placeholder-01.jpg">
>         </div>
>     </div> </div>

Answer 1

1。消除高度限制：

-<div class="flex 2xl:flex-row justify-start items-center w-full md:w-9/12 2xl:w-full 2xl:justify-center min-h-[38rem] h-[88vh] relative">
+<div class="flex 2xl:flex-row justify-start items-center w-full md:w-9/12 2xl:w-full 2xl:justify-center relative">

2。使用flexbox进行垂直对齐：

+<div class="flex 2xl:flex-row justify-start items-start w-full md:w-9/12 2xl:w-full 2xl:justify-center relative">

3.调整子容器内边距或边距以获得最佳空间（可选）：

<div class="space-y-8 ...">