如何在小屏幕中适配两个浮动div？附JSON生成列表代码场景

这问题我太熟悉了！小屏幕下用浮动做左右布局很容易踩坑——要么link被挤到奇怪的位置，要么description的内容和link重叠，毕竟浮动是CSS2时代的老方案，对响应式的支持天生就弱。给你几个实用的解决方案，按推荐程度排序：

方法1：改用Flexbox布局（最推荐） #

Flexbox是现代响应式布局的首选，它能自动处理不同屏幕下的元素排列，完全不需要依赖浮动。只需要修改你的CSS即可，HTML结构不用动：

.list { 
  list-style-type: none; 
  padding: 0; /* 去掉默认内边距，让布局更整洁 */
}
.row1 {
  display: flex;
  flex-wrap: wrap; /* 小屏幕下自动让元素换行 */
  gap: 1rem; /* 给两个元素之间留间距，比margin更可控 */
  align-items: center; /* 可选：让两个元素垂直居中对齐 */
}
.description {
  flex: 1 1 200px; /* 核心规则：基础宽度200px，空间足够时自动占满剩余宽度 */
  overflow: auto;
}
.link {
  flex: 0 0 auto; /* 保持link的自身宽度，不扩展也不收缩 */
}

效果：大屏幕下description占满左侧剩余空间，link靠右；小屏幕宽度不足200px时，link会自动换行到description下方，完美适配。

方法2：用Grid布局（适合规整场景） #

如果你的布局比较规整，Grid也是个不错的选择，它的规则更直观：

.list { 
  list-style-type: none; 
  padding: 0;
}
.row1 {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占满剩余宽度，第二列自适应 */
  gap: 1rem;
  align-items: center;
}
/* 小屏幕下强制切换为单列布局 */
@media (max-width: 600px) {
  .row1 {
    grid-template-columns: 1fr;
  }
}

效果和Flexbox类似，但Grid更适合需要多列多行的复杂布局，这里用它做两列布局也很顺手。

方法3：保留浮动+媒体查询（兼容老项目） #

如果因为项目限制必须保留浮动，那可以通过媒体查询在小屏幕下重置浮动规则：

/* 保留你原来的基础样式 */
.list { list-style-type: none; }
div.description { float: left; overflow: auto; }
div.link { float: right; overflow: auto; }
.row1, .row2 { clear: both; }

/* 小屏幕下重置布局 */
@media (max-width: 600px) {
  div.description, div.link {
    float: none;
    width: 100%; /* 让两个元素都占满宽度，自动换行 */
    margin-bottom: 0.5rem; /* 给换行后的元素留点间距 */
  }
}

这种方法能兼容老浏览器，但浮动本身容易引发 clearfix 等问题，维护起来不如Flexbox/Grid方便，所以只推荐给老项目改造。

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