Как добиться ошеломляющих дивов?

Question

Я столкнулся с проблемой, на которую не могу найти ответ.По сути, у меня есть набор элементов div, принадлежащих к одному классу, но различающихся по размеру в зависимости от отображаемых в них данных.Я пытаюсь заставить их шататься определенным образом.(извините за мои плохие рисунки)

редактировать: почти забыл упомянуть, div используют класс начальной загрузки "col-lg-6".

Это оригинальный результат: оригиналЭффект

Результат, которого мне удалось достичь: достигнутый эффект

И желаемый результат, которого я пытаюсь достичь: Желаемый эффект

Стиль 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>