如何在css中将c2子节点放置在父级的顶部和底部？

Question

我需要添加一个父元素的两个子元素，一个在顶部，另一个在底部。就像这样。

​

这就是我的密码。

 <div class=" w-full flex justify-betwen bg-white items-center">
    <div class="ml-auto">
        <img class="object-cover mr-2 md:mr-4 ml-2 md:ml-4 float-left h-40  lg:w-32 w-14 xs:w-16"
            src="../img/Bless.png" alt="" />
    </div>

    <div class="w-full mx-8">
        <div class="text-redfull text-ms xs:text-lg md:text-xl lg:text-2xl xl:text-3xl">
            Some text here to top as a title.
        </div>

        <div
            class=" text-gray70 flex justify-between items-center text-xs xs:text-base md:text-base lg:text-lg mb-0">
           and this is the date to the bottom Uploaded Auguts 4, 2020
        </div>
    </div>

</div>

头衔应该保持在顶端。

约会到最底层。

(如果有人知道：)

Answer 1

您可以为标题和日期添加两个div，并向它们添加垂直边距。

我不知道你是否想用文本，所以我已经实现了这两种情况。

判例1:附有案文

​

<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
  <div class="ml-auto">
    <img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
  </div>

  <div class="mx-8 w-full">
    <div class="text-3xl font-semibold text-red-900">Your Title here</div>
    <div class="my-3">
      <div class="text-ms xs:text-lg text-red-500 md:text-xl lg:text-2xl xl:text-3xl">Some text here to top as a title.</div>

      <div class="xs:text-base mb-0 flex items-center justify-between text-xs text-gray-500 md:text-base lg:text-lg">and this is the date to the bottom Uploaded Auguts 4, 2020</div>
    </div>

    <div class="text-base font-extralight">25 June 2022</div>
  </div>
</div>

​

案例2:没有文本

​

<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
  <div class="ml-auto">
    <img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
  </div>

  <div class="mx-8 w-full">
    <div class="text-3xl font-semibold text-red-900">Your Title here</div>
    <div class="my-12">
    </div>

    <div class="text-lg font-extralight">25 June 2022</div>
  </div>
</div>

​

我使用了一个在线图像，这样你就可以用你的图像来代替它了。

如果您想要更多的差距，那么只需将my-12增加到更多。