如何实现惊人的div？

Question

我一直在处理一个问题，我似乎找不到答案。基本上，我有一组div，它们都属于同一个类，但大小因其中显示的数据而异。我试图让他们以某种方式交错。(请原谅我画得不好)

编辑:几乎忘了提一下，div使用的是bootstrap类“col lg-6”。

这是原始结果：original effect

我能够实现的结果是：achieved effect

我想要达到的结果是：desired effect

我用来实现当前效果的css样式如下：

.div_class {
   position: relative;
   vertical-align: top;
   text-align: center;
   display: inline-block;
   margin-top: 10px;
}

怎样才能达到预期的效果呢？

谢谢!

Answer 1

您可以始终使用表格来创建此效果。确保使用单元格内的填充来创建所需的间距...希望这能有所帮助

<table style="width: 100%;">
<tbody>
<tr style="height:45%;">
<td style="height: 150px; width: 98px;">Div 1</td>
<td style="height: 225px; width: 118px;" rowspan="3">Div 3</td>
</tr>
<tr style="height: 47px;">
<td style="height: 150px; width: 98px;" rowspan="2">Div 2;</td>
</tr>
</tbody>
</table>