html - 在 IE9 中可以使用 3 个 DIVS 的响应式布局吗？

Question

是否可以在 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;
}

或

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

Answer 1

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

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

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