如何用Tailwind实现指定的两栏响应式布局？

问题分析 #

你当前用float布局的问题在于：

• 浮动布局容易出现高度塌陷，导致右侧红色容器的高度无法和左侧绿色容器对齐
• 红色子div未设置高度，无法实现各占50%的纵向分布
• 浮动的响应式适配需要额外处理，不如现代布局方式灵活

解决方案（基于Tailwind CSS） #

推荐使用Flexbox或Grid布局，这两种方式天然支持响应式，且能精准控制尺寸与对齐：

方案1：Flexbox布局

外层容器用flex实现左右分栏，右侧容器用flex-col+h-full让两个红色div纵向平分高度：

<div class="w-full min-h-screen flex">
  <!-- 绿色容器：占75%宽度 -->
  <div class="w-3/4 bg-green-500"></div>
  <!-- 右侧红色容器：占25%宽度，纵向排列子元素 -->
  <div class="w-1/4 flex flex-col">
    <div id="red-one" class="h-1/2 bg-red-500"></div>
    <div id="red-two" class="h-1/2 bg-red-500"></div>
  </div>
</div>

方案2：Grid布局

用网格布局直接划分行列，逻辑更直观：

<div class="w-full min-h-screen grid grid-cols-4">
  <!-- 绿色容器：跨3列 -->
  <div class="col-span-3 bg-green-500"></div>
  <!-- 右侧容器：跨1列，内部再划分为2行 -->
  <div class="col-span-1 grid grid-rows-2">
    <div id="red-one" class="row-span-1 bg-red-500"></div>
    <div id="red-two" class="row-span-1 bg-red-500"></div>
  </div>
</div>

响应式适配 #

如果需要在小屏幕（如手机）下自动切换为垂直排列，只需添加md:这类响应式前缀，仅在大屏启用分栏布局：
以Flexbox为例：

<div class="w-full min-h-screen flex flex-col md:flex-row">
  <div class="w-full md:w-3/4 bg-green-500 min-h-[300px] md:min-h-0"></div>
  <div class="w-full md:w-1/4 flex flex-col">
    <div id="red-one" class="h-1/2 bg-red-500"></div>
    <div id="red-two" class="h-1/2 bg-red-500"></div>
  </div>
</div>

注：给绿色容器加min-h-[300px]是为了避免移动端内容为空时容器高度消失。

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