IE9 中可能有 3 个 DIVS 的响应式布局？答案

【问题标题】：Responsive layout with 3 DIVS possible in IE9?IE9 中可能有 3 个 DIVS 的响应式布局？
【发布时间】：2018-02-13 21:33:35
【问题描述】：

是否有可能在 IE9 中进行这项工作？

示例 1：https://jsfiddle.net/ydv01r9e/5/

HTML：

<div class="container">
   <div class="b">b<br>b</div>
   <div class="a">a</div>
   <div class="c">c</div>
</div>

CSS：

  .a, .b, .c {
  width: 50%;
}

.b {
  float: left;
}

.a, .c{
  float: right;
}

@media (max-width: 700px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .a, .b, .c {
    width: auto;
  }
  .a {
    order: 1;
  }
  .b {
    order: 2;
  }
  .c {
    order: 3;
  }
}

.a {
  background: red;
}

.b {
  background: blue;
}

.c {
  background: yellow;
}

或

example2: http://jsfiddle.net/eLq0770h/14/ ，但是这个没有响应。我需要移动设备的 3x1 布局：顶部为红色 div，中间为蓝色，底部为绿色，如示例 1。

【问题讨论】：

标签： html css layout internet-explorer-9

【解决方案1】：

我建议使用像 Modernizr 这样的网站来查看 flex-box 的兼容性问题。

您很可能需要使用像 display:table-cell; 这样的系统。在 ie9 中正确格式化。

Here's another question for a similar issue with more information.

【讨论】：