html - 替代 flex-flow :column for older browsers

Question

给定一组 child ，我需要在两组堆叠之间交替，如下图所示。

我能够使用 flex-flow: column 实现这种堆叠。由于在 IE9 中不支持，有没有办法在旧版浏览器中实现这种无需 flex box 的堆叠？

.box {
    border: 1px solid green;
    margin: 5px;
}
.container {
    display: inline-flex;
    height: 70px;    
    flex-flow: column wrap;
}

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

Answer 1

这是一个使用负边距的技巧:

.box {
    border: 1px solid green;
    margin: 5px;
    width:100px;
    float: left;
    height: 100px;
}
.container {
    height: 70px; 
    width:225px;
}
.container div:nth-child(1) {
    color:red;
    float: left;

}
.container div:nth-child(2) {
    color:red;
    float: left;
        clear: both;
}
.container div:nth-child(3) {
    color:red;
    float: right;
    margin-top:-107px;

}
.container div:nth-child(4) {
    color:red;
    float: right;
      clear: both;
      margin-top:-107px;
}

https://jsfiddle.net/m5jk8wko/1/