Question

我一直在处理一个问题，我似乎无法找到答案。基本上，我有一组div，都是同一个类，但大小不一，取决于它们中显示的数据。我试图让他们以某种方式错开。（原谅我糟糕的图纸）

编辑：差点忘了提一下，div正在使用bootstrap类“col-lg-6”。

我能够实现的结果： 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>

如何实现惊人的div？

1 个答案: