默认两列布局在小屏幕下合并为单列堆叠的实现方案求助

嘿，我来帮你搞定这个响应式布局的问题！你想要的默认双列、小屏幕自动转单列的效果，用现代CSS的Flexbox或者Grid就能轻松实现，比传统的float布局更灵活、更易维护，我给你详细拆解两种方案：

方案一：使用CSS Flexbox（推荐新手，更直观） #

Flexbox是专门为一维布局（行或列）设计的，非常适合这类需求。

完整代码示例 #

<!-- HTML结构 -->
<div class="container">
  <div class="left-column">左侧内容区域</div>
  <div class="right-column">右侧内容区域</div>
</div>

/* 基础样式 */
.container {
  /* 开启Flex布局 */
  display: flex;
  /* 两列之间的间距，可根据需求调整 */
  gap: 20px;
  /* 给容器加个左右内边距，避免内容贴边 */
  padding: 0 15px;
}

.left-column, .right-column {
  /* 让两列平分可用空间，也可以设具体宽度比如300px */
  flex: 1;
  /* 给列加个背景色方便看效果，实际项目可删除 */
  background: #f0f0f0;
  padding: 20px;
}

/* 媒体查询：当屏幕宽度小于768px时（手机等小屏幕） */
@media (max-width: 767px) {
  .container {
    /* 把Flex的主轴方向改成垂直，元素从上到下排列 */
    flex-direction: column;
  }
}

关键说明 #

• display: flex：让容器内的元素变成Flex项目，默认横向排列
• flex: 1：让两个列自动平分容器的可用宽度，如果你想让某一列更宽，可以改成flex: 2（另一列flex:1），这样比例就是2:1
• @media (max-width: 767px)：这是响应式的核心，当屏幕宽度小于768px时，触发里面的样式，把布局改成垂直单列

方案二：使用CSS Grid（适合复杂二维布局） #

Grid是为二维布局设计的，实现这个需求同样简单，代码更简洁：

完整代码示例 #

<!-- HTML结构和Flex方案一样 -->
<div class="container">
  <div class="left-column">左侧内容区域</div>
  <div class="right-column">右侧内容区域</div>
</div>

/* 基础样式 */
.container {
  /* 开启Grid布局 */
  display: grid;
  /* 定义两列，每列平分空间 */
  grid-template-columns: 1fr 1fr;
  /* 列间距 */
  gap: 20px;
  padding: 0 15px;
}

.left-column, .right-column {
  background: #f0f0f0;
  padding: 20px;
}

/* 小屏幕适配 */
@media (max-width: 767px) {
  .container {
    /* 改成单列，占满整个宽度 */
    grid-template-columns: 1fr;
  }
}

关键说明 #

• grid-template-columns: 1fr 1fr：直接定义两列，每列占1份可用空间
• 媒体查询里改成grid-template-columns: 1fr，就变成单列布局了

为什么不推荐旧方案？ #

如果你之前用的是float来实现双列，那在小屏幕下需要清除浮动、调整宽度，代码会更繁琐，而且容易出现布局错位的问题。Flex和Grid是现代CSS布局标准，浏览器支持率几乎100%，代码更简洁易维护。

你可以根据自己的习惯选择其中一种方案，两种都能完美实现你想要的效果！

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