使用transform后调整父div的大小:对子标记进行转换

Question

因此，在使用transform转换更改div的位置后，父div不会相应地调整大小以填充空白。如有任何建议，将不胜感激。

​

<script src="https://cdn.tailwindcss.com"></script>
<p>
Distance from top
</p>
<section>
  <div class="container mx-auto my-8">
    <div class="flex flex-col gap-4 px-4 font-bold">
      <div class=" bg-green-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
      <div class="-translate-y-16 self-end bg-slate-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
      <div class="-translate-y-32 bg-green-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
    </div>
  </div>
</section>
<p>
Distance from bottom
</p>

​

Answer 1

• ❌--我尝试了translate的方法，但没有成功，

• ❌我尝试了position的方法，但仍然不起作用。

• ✅，但是用了否定的margin把戏，正在起作用！

-mt-16，-mt-32类解决它，

mt是指普通CSS中的margin-top。

如果添加-前缀，则表示负值。

这个问题解决了！

​

<script src="https://cdn.tailwindcss.com"></script>
<p>
  Distance from top
</p>
<section>
  <div class="container mx-auto my-8">
    <div class="flex flex-col gap-4 px-4 font-bold">
      <div class="bg-green-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
      <div class="-mt-16 self-end bg-slate-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
      <div class="-mt-32 bg-green-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
    </div>
  </div>
</section>
<p>
  Distance from bottom
</p>

​

如果在文本和内容之间有一个空格，是因为container类的缘故，但是已经解决了。(请参阅示例中的Distance from bottom文本和我的“重大改进”)