适用于IE9和IE10的Flexbox订单，位置，包装后备

Question

我有一个＆＃34;后端工程约束＆＃34;这迫使我以非语义的方式订购我的标记，但在视觉上我的团队需要一个不同的顺序。我成功地使用弹性框实现了这一点，并尝试使用flex.js进行IE 10和9的填充。不幸的是10和9都有问题。

请注意，我不能使用jQuery / DOM操作来移动＆＃34;第三个＆＃34;部分。

是否有其他人可以提供有助于实现以下目标的替代建议或修正：

标记：

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

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

所以＆＃34;第一＆＃34;和＃34;第三＆＃34;需要在视觉上显示为同一部分和第二部分＃34;部分需要位于下方并进入容器的整个宽度。

请查看我的完整工作代码（完全使用chrome）：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>

Here is your modified CodePen

这种方法的主要缺点是随着窗口变小，它不会重排内容。必须在某些窗口大小处使用媒体查询，这会根据需要更改元素的宽度和位置。一旦内容可以包装到自己的行上，使用CSS表格布局将非常有用。 Info here