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

Question

<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-rightand的东西float-left（不使用 flex），但到目前为止没有任何效果..

顺风游乐场。

标签： htmlcsstailwind-css

Answer 1

您可以尝试items-end在 parent 和flexclass 上使用来解决问题。

<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>

顺风游乐场