cssdiv对齐就像一个谜

我正试着像拼图一样把这些div拼在一起。我想将div 4在div 1和div 3之间对齐。到现在为止，第4部分从第3部分开始。什么是解决方案，使div“插槽”相互插入

<div style='overflow:hidden;width:500px;'>
            <div style='float:left;width:200px;height:400px;border:1px solid #707070'>1</div>
            <div style='float:left;width:200px;height:300px;border:1px solid #707070'>2</div>
            <div style='float:left;width:200px;height:400px;border:1px solid #707070'>3</div>
            <div style='float:left;width:200px;height:300px;border:1px solid #707070'>4</div>
            </div>

1.
2.
3.
4.

---

我不想使用绝对位置。这只是一个例子。真正的代码在一个循环中，内容大小是动态的。

。CSS本身的功能还不足以动态地完成这项工作。

我认为，如果你画出它，就更容易理解并提出一个答案。