html - 在两列页面上显示不同高度(事先不知道)的 HTML block

Question

图片往往胜于语言，这里是我想要实现的模式:

因此，我尝试做的是在页面的右半部分或左半部分放置一些文本 block 。但是，我事先并不知道每个 block 的高度；我只知道它们的宽度(大约占屏幕总宽度的 45%)

第一个元素必须在页面的右半边，因为静态元素已经在左半边了。但是，根据第 1 个 block 的高度，如果有空间，第二个 block 必须在左侧，否则在右侧。
每个 block 都由局部 View 加载(我使用的是 ASP.NET MVC)

我完全不知道如何实现这一目标，但是，这是我尝试过的:

<div style="width:45%; display: inline-block">
    // My static element hard-coded
</div>

<div style="width:45%; display: inline-block">
    // My blocks
</div>

但我怀疑这种 HTML 结构是否良好，因为元素只会在 45% 的右侧加载。

有关信息，中间分隔符的样式如下:

.middle-separator {
    width: 1px;
    background: #aaa;
    position: absolute;
    top: 30px;
    left: 50%;
    bottom: 0;

我还尝试使用 Bootstrap 和 col-sm-4对于我的 block ，但它不起作用，例如，元素 3 不会紧随元素 1 之后，而是低得多。
另外，我宁愿避免 <table>并仅使用 CSS 实现此目的。这是一个个人元素，我想正确地完成它。

Answer 1

一些CSS

.card-columns {
    /*Set the column-count to how many columns you want
     *Set the column-gap to ajust the space between the cards
     */
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}
.card-columns .card {
    display: inline-block;
    width: 100 %
}

一些HTML

<div class="card-columns">
    <div class="card"></div><!--duplicate this div and add the content for that card to it-->
</div>

courtesy: bootstrap CSS