適用於IE9和IE10的Flexbox訂單，位置，包裝后備

Question

我有一個“后端工程約束”，迫使我以非語義方式訂購我的標記，但在視覺上我的團隊需要不同的順序。 我成功地使用彈性框實現了這一點，並嘗試使用flex.js對IE 10和9進行填充。不幸的是，10和9都有問題。

請注意，我不能使用jQuery / DOM操作來移動“第三”部分 。

是否有其他人有其他建議或修正可以幫助實現以下目標：

標記：

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

但他們需要在IE 10和9中直觀地看到以下內容：

因此，“第一”和“第三”需要在視覺上顯示為相同部分的一部分，而“第二”部分需要在下面並且達到容器的整個寬度。

請參閱我的完整工作codepen（完全使用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> 

這是您修改過的CodePen

這種方法的主要缺點是隨着窗口變小，它不會重排內容。 必須在某些窗口大小處使用媒體查詢，這會根據需要更改元素的寬度和位置。 一旦內容可以包裝到自己的行上，使用CSS表布局將很有用。 信息在這里