如何用Tailwind CSS将垂直排列的Div调整为水平并排显示？

你的核心问题在于外层容器的布局设置限制了横向排列，以下是两种简单的修改方案：

方案一：使用Grid布局（推荐，适配响应式） #

修改外层容器的Grid类，调整列数并移除宽度限制：

1. 将 grid-cols-1 改为响应式列数（比如 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3），让不同屏幕尺寸下自动调整列数
2. 移除 w-1/4，替换为 w-full 让容器占满可用宽度
3. 添加 gap-8 给卡片之间增加间距

修改后的完整代码：

<template>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 pt-8 w-full">
    <div class="flex flex-col p-6 items-center gap-8 rounded-md border-[1px] border-border_sm bg-zinc-800 text-white">
      <a :href="#">
        <img class="w-full rounded-md" src="https://aniketkotal.me/_nuxt/hanako.5b94cb52.jpg">
      </a>
      <div class="flex flex-col gap-4">
        <p class="text-lg">
          name
        </p>
        <p class="md:text-base">
          description
        </p>
      </div>
    </div>
    <!-- 重复添加卡片即可自动水平排列 -->
    <div class="flex flex-col p-6 items-center gap-8 rounded-md border-[1px] border-border_sm bg-zinc-800 text-white">
      <a :href="#">
        <img class="w-full rounded-md" src="https://aniketkotal.me/_nuxt/hanako.5b94cb52.jpg">
      </a>
      <div class="flex flex-col gap-4">
        <p class="text-lg">
          name 2
        </p>
        <p class="md:text-base">
          description 2
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    project: {
      default: null,
      type: Object,
    }
  }
}
</script>

方案二：使用Flex布局 #

如果更习惯Flex，也可以将外层容器改为Flex布局：

1. 外层容器使用 flex flex-wrap gap-8 pt-8 w-full
2. 卡片添加 flex-1 min-w-[280px]，让卡片自适应宽度且在空间不足时自动换行

示例代码片段：

<template>
  <div class="flex flex-wrap gap-8 pt-8 w-full">
    <div class="flex flex-col flex-1 min-w-[280px] p-6 items-center gap-8 rounded-md border-[1px] border-border_sm bg-zinc-800 text-white">
      <!-- 卡片内容不变 -->
    </div>
  </div>
</template>

关键修改说明 #

• 移除 w-1/4：原来的宽度限制会让容器只能占1/4宽度，无法容纳多个水平排列的卡片
• gap-* 类：负责控制卡片之间的间距，避免元素挤在一起
• 响应式列数/最小宽度：保证在手机等小屏幕上仍能正常垂直排列，提升兼容性

内容的提问来源于stack exchange，提问作者clipyz