使用 Tailwindcss 使内容与响应能力保持一致

Question

我正在尝试像下面的模板那样响应式地对齐图像和文本，在移动版本中，主图像被隐藏，只有 rest 内容以相同的方式出现。

我正在 Tailwind CSS 游乐场尝试这个。 请找到链接Tailwind CSS 游乐场

Answer 1

使用以下代码：

<div class="flex">
  <img class="hidden md:block" src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" width="400px" />
  <div class="ml-4 mt-4 flex flex-1 flex-col gap-6">
    <div class="flex flex-1 gap-5">
      <img src="https://www.spartagroup.ca/wp-content/uploads/2019/04/Sample-Logo-square.png" width="200px" />
      <div class="flex-1 bg-amber-400 text-2xl">Text Content</div>
    </div>
    <div class="flex flex-1 gap-5">
      <img src="https://www.spartagroup.ca/wp-content/uploads/2019/04/Sample-Logo-square.png" width="200px" />
      <div class="flex-1 bg-amber-400 text-2xl">Text Content</div>
    </div>
    <div class="flex flex-1 gap-5">
      <img src="https://www.spartagroup.ca/wp-content/uploads/2019/04/Sample-Logo-square.png" width="200px" />
      <div class="flex-1 bg-amber-400 text-2xl">Text Content</div>
    </div>
  </div>
</div>

Output：

在大型设备中：

在小型设备中：

顺风游戏