IE9和IE10的Flexbox命令、位置、包装退路

Question

我有一个“后端工程约束”，迫使我以非语义的方式排序标记，但在视觉上，我的团队需要一个不同的顺序。我成功地用flex盒实现了这一点，并且尝试为IE10和9填充flexibility.js。不幸的是，10和9都有问题。

注意，我不能使用jQuery/DOM操作将“第三”部分移动到上。

是否有其他人有可以帮助实现以下目标的替代建议或解决方案：

标记：

<div class="first"> <div class="second"> <div class="third">

但他们需要在IE 10和9中直观地看到以下内容：

​

​

因此，“第一”和“第三”需要在视觉上显示为同一节分开，而“第二”段需要在下面和整个容器的宽度。

请参阅我的完整工作代码(完全使用铬)：http://codepen.io/semantictissue/pen/MypRVz

有什么建议或帮助使这种跨浏览器友好吗？

Answer 1

我找到的最简单的解决方案是将.third定位为absolute。要在视觉上将.first和.third分割开来，将CSS添加到.first中，这样就可以在剩余的空间中设置.third。

​

body { margin: 0; position: relative; }
.first  { height:50px; width: 50%; background: blue; }
.second { height:50px; width:100%; background: gray; }
.third  { height:50px; width: 50%; background:green;
          position: absolute; top: 0; right: 0;      }

<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>

​

这是您修改过的CodePen

这种方法的主要缺点是，当窗口变小时，它不会重新流内容。媒体查询必须在某些窗口大小下使用，这将根据需要更改元素的宽度和位置。一旦内容可以包装到自己的行上，使用CSS表布局就会很有用。这里的信息