顺风将一个 div 放在另一个 div 网格的底部答案

【问题标题】：tailwind put a div in bottom of another div grid顺风将一个 div 放在另一个 div 网格的底部
【发布时间】：2021-03-08 10:51:04
【问题描述】：

我有以下代码

<template>

<div class="grid grid-cols-1 gap-4">
  <div id="test" class="bg-red-700 h-screen">
    <div class="grid grid-cols-1 gap-4 ">
      <p class="bg-black center text-5xl shadow-md w-screen h-200">Lorem ipsum dolor sit amet ...</p>
      <p class="bg-black center text-5xl shadow-md w-screen h-200">Lorem ipsum dolor sit amet ...</p>
      
      <div class="container bg-gray-900 p-10 h-screen text-white">
        <div class="flex justify-center bg-red-500 p-5"><!--inset-0  fill parent-->
          <div class="bg-gray-800 p-10 rounded-xl shadow-lg">
          
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="bg-blue-800 h-screen">3</div>
  <div class="bg-red-700  h-screen">4</div>
  <div class="bg-blue-800">5</div>
  <div class="bg-red-700">6</div>
  <div class="bg-blue-800">7</div>
</div>
  
</template>

我有一个 1 列的网格，在这一列中我有不同的彩色行。蓝红蓝红等等。。在第一行中，我有另一个网格，这个网格有两个带有文本的 p 标签和一个容器。这个容器应该包含一些输入元素。但是我不能把这个容器放在第一行的底部。

我想把那个容器放在第一行的底部。

如图所示。带有灰色方块的浅红色元素应位于带有深红色背景的元素的底部。

另一个更简单的问题是，如果我有 3 行 Lorem ipsum dolor sit amet...我怎么能把第 3 行放在底部？

如果问题不清楚请评论！

感谢您的帮助！

【问题讨论】：

标签： css vue.js tailwind-css

【解决方案1】：

我对您的问题的理解是，您想将深红色背景的行放在浅红色背景的行下方。为此，您可以使用以下代码：

See output here

<div class="grid grid-cols-1 gap-4">
    <div id="test" class="bg-red-700 h-screen">
        <div class="grid grid-cols-1 gap-4 ">
            <p class="bg-black center text-5xl shadow-md w-screen h-200">
                Lorem ipsum dolor sit amet ...
            </p>
            <p class="bg-black center text-5xl shadow-md w-screen h-200">
                Lorem ipsum dolor sit amet ...
            </p>
        </div>
    </div>
    <div class="container bg-gray-900 p-10 h-screen text-white">
        <div class="flex justify-center bg-red-500 p-5">
            <div class="bg-gray-800 p-10 rounded-xl shadow-lg"></div>
        </div>
    </div>
    <div class="bg-blue-800 h-screen">3</div>
    <div class="bg-red-700  h-screen">4</div>
    <div class="bg-blue-800">5</div>
    <div class="bg-red-700">6</div>
    <div class="bg-blue-800">7</div>
</div>

【讨论】：