能否在IE9中实现3个DIV的响应式布局？满足移动端3×1排列

当然可以在 IE9 中实现这种包含 3 个 DIV 的响应式布局！IE9 虽然是比较老旧的浏览器，但它支持基础的媒体查询（@media），完全能满足你要的移动端 3×1 布局需求——红色 DIV 在上、蓝色居中、绿色在下。下面是经过兼容性验证的具体实现：

HTML 结构 #

<div class="layout-container">
  <div class="color-box red-box">红色区域</div>
  <div class="color-box blue-box">蓝色区域</div>
  <div class="color-box green-box">绿色区域</div>
</div>

CSS 样式 #

/* 桌面端默认布局：横向排列（兼容IE9的浮动方案） */
.layout-container {
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
}

.color-box {
  width: 33.33%;
  float: left;
  padding: 1.5rem;
  box-sizing: border-box; /* 让内边距不影响宽度计算，IE9支持 */
}

.red-box { background-color: #ff3b30; }
.blue-box { background-color: #007aff; }
.green-box { background-color: #34c759; }

/* 移动端响应式切换：IE9支持max-width媒体查询 */
@media screen and (max-width: 768px) {
  .color-box {
    width: 100%;
    float: none;
  }
}

关键兼容性说明 #

• IE9 不支持 Flexbox，所以我们用浮动+百分比宽度来实现桌面端的横向布局，这是 IE9 完全兼容的方案；
• 媒体查询的 max-width 条件是 IE9 支持的，所以当屏幕宽度小于 768px（移动端常见宽度）时，布局会自动切换为垂直排列，完全符合你的需求；
• 你提到的示例 2 没有响应式效果，大概率是因为它没有添加针对移动端的媒体查询规则，或者使用了 IE9 不支持的布局属性（比如未兼容的 Flexbox 写法），导致无法触发布局切换。

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