Question

是否可以在IE9中使其工作？

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：https://jsfiddle.net/ydv01r9e/5/，但这个没有响应。移动设备需要3x1布局：顶部为红色div，中间为蓝色，底部为绿色，如示例1所示。

Answer 1

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

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

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

在IE9中可以实现3 DIVS的响应式布局？

1 个答案: