CSS div对齐像一个谜题

Question

我试图插入这些divs togethor像一个谜题。我想在div 1和3之间对齐div 4.截至目前div 4在div 3之下开始。什么是解决方案，以便divs“插入”彼此。

<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> 

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

Answer 1

JQuery Masorny。单独使用CSS不够强大，无法动态完成此操作。