Tailwindcss - 将两个不同大小的文本与底线对齐

【问题标题】：Tailwindcss - align two texts with different sizes to bottom lineTailwindcss - 将两个不同大小的文本与底线对齐
【发布时间】：2021-06-17 05:08:21
【问题描述】：

<div class="flex">
  <div class="flex-1 text-sm bg-red-300">
       <span class="align-bottom">I want this to be on the same bottom level as Right content</span>
  </div>
  <div class="flex-1 text-right  text-5xl bg-blue-400">
    Right content
  </div>
</div>

我尝试了align-bottom、align-text-bottom 或float-right 和float-left（不使用flex），但到目前为止没有任何效果..

顺风Playground.

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

您可以尝试在父级上使用items-end 和flex 类来解决问题。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex">
  <div class="flex-1 text-sm bg-red-300 flex items-end">
    <span>I want this to be on the same bottom level as Right content</span>
  </div>
  <div class="flex-1 text-right  text-5xl bg-blue-400">
    Right content
  </div>
</div>

Tailwind Playground

【讨论】：