使用Tailwindcss实现响应式内容对齐及移动端主图隐藏

核心实现方案 #

通过Tailwind响应式工具类，实现桌面端图文左右/右左交替对齐，移动端自动隐藏图片、文本占满宽度的布局效果。关键利用hidden md:block控制图片显示逻辑，结合flex布局的响应式排列实现对齐。

完整代码示例 #

<div class="container mx-auto px-4 py-8">
  <!-- 图文左对齐组 -->
  <div class="flex flex-col md:flex-row items-center gap-8 mb-12">
    <img src="https://picsum.photos/400/300" alt="示例图" class="w-full md:w-1/2 hidden md:block rounded-lg shadow-md">
    <div class="w-full md:w-1/2">
      <h3 class="text-xl font-bold mb-3">标题文本</h3>
      <p class="text-gray-700">对应图片的描述内容，移动端会自动占满容器宽度，图片将被隐藏。</p>
    </div>
  </div>

  <!-- 图文右对齐组 -->
  <div class="flex flex-col md:flex-row-reverse items-center gap-8 mb-12">
    <img src="https://picsum.photos/400/301" alt="示例图" class="w-full md:w-1/2 hidden md:block rounded-lg shadow-md">
    <div class="w-full md:w-1/2">
      <h3 class="text-xl font-bold mb-3">标题文本</h3>
      <p class="text-gray-700">这是反向排列的图文组，桌面端图片居右、文本居左，移动端同样仅显示文本。</p>
    </div>
  </div>

  <!-- 可重复添加更多组 -->
  <div class="flex flex-col md:flex-row items-center gap-8">
    <img src="https://picsum.photos/400/302" alt="示例图" class="w-full md:w-1/2 hidden md:block rounded-lg shadow-md">
    <div class="w-full md:w-1/2">
      <h3 class="text-xl font-bold mb-3">标题文本</h3>
      <p class="text-gray-700">重复上述结构即可创建多组交替对齐的图文模块，满足布局需求。</p>
    </div>
  </div>
</div>

关键类说明 #

• hidden md:block：默认（移动端）隐藏图片，屏幕宽度≥768px（md断点）时显示图片
• flex-col md:flex-row/flex-col md:flex-row-reverse：移动端垂直堆叠元素，桌面端分别实现正序/逆序横向排列
• items-center：桌面端时让图文在垂直方向居中对齐
• w-full md:w-1/2：移动端文本占满容器宽度，桌面端图文各占50%宽度
• gap-8：统一设置元素间的间距，适配不同屏幕尺寸

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