在两列页面上显示 HTML 个不同高度的块（事先不知道）

Question

图片往往胜于雄辩，下面是我想要实现的架构：

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

第一个元素必须在页面的右半边，因为静态元素已经在左半边了。但是，根据第一个块的高度，如果有空间，第二个块必须在左侧，否则在右侧。
每个块都由部分视图加载（我正在使用 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 作为我的积木，但它不起作用，例如元素 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

Answer 2

看看这个。硬编码。我将 padding 用于动态元素，将 div 的固定高度命名为 static，并将每个 div 的位置与您提供的图像完全相同。如果我误会了，请发表评论。

body {
  margin: 0;
}

.column1, .column2 {
  width: 45%;
}
.column1 > div, .column2 > div{
  border: 2px solid black;
  display: block;
  margin-bottom: 15px;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}
.column2{
  position: absolute; 
  top: 0;
  right: 0;
}
.static {
  height: 100px;
}

.element1 {
  padding: 100px 0 100px 0;

}

.element2 {
  padding: 150px 0 150px 0;
}

.element3 {
  padding: 35px 0 35px 0;
 
}

.element4 {
  padding: 25px 0 25px 0;

}

.element5 {
  padding: 45px 0 35px 0;
}

.element6 {
  padding: 40px 0 40px 0;
}

.divider {
  position: absolute;
  height: 95%;
  width: 3px;
  background: black;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

<div class="column1">
  <div class="static">
    static
  </div>

  <div class="element2">
    element2
  </div>

  <div class="element6">
    element6
  </div>
</div>
<div class="column2">
  <div class="element1">
    element1
  </div>
  <div class="element3">
    element3
  </div>
  <div class="element4">
    element4
  </div>
  <div class="element5">
    element5
  </div>
</div>
<div class="divider">


</div>

Answer 3

https://jsfiddle.net/amoolya93/ne9sm2kc/

<div class= 'parent'>
<div class="blah">
// My static element hard-coded
</div>

<div class="blah2 el1">
    // Element 1
</div>

<div class="blah2 el2">
   // Element 2 
</div>

<div class="blah2 el3">
   // Element 3
</div>

<div class="blah2 el4">
   // Element 4
</div>
</div>


.parent{
  display: flex,
  flex-wrap: wrap
}

.blah{
  width: 250px;
  background-color: red;
  color: blue;
  margin-bottom: 2px;
  display: inline-flex;
 }

 .blah2{
    width: 250px;
    background-color: blue;
    color: yellow;
    margin-bottom: 2px;
    display: inline-flex
  }

.el1{
   height: 20px;
}

 .el2{
   height: 40px;
 }

 .el3{
   height: 50px;
 }

 .el4{
   height: 20px;
 }

看看这个 fiddle，我在其中使用了 flex 和 flex-wrap。这可能就是您所需要的。

Answer 4

我会使用<div>

将屏幕的右半部分和左半部分分成不同的区域

然后您可以将静态元素 放在左侧的顶部 <div>

这是一个有效的示例

body {
  max-width: 95%;
  background: #111;
}
.columnleft {
  float: left;
  max-width: 50%;
}
.columnright {
  float: right;
  max-width: 50%;
}
.article {
  border: 1px solid #999;
  display: inline-block;
  margin: 4%;
}
.title {
  color: #aff;
  font-size: 22px;
  text-align: center;
  margin: 20px 0 5px 0;
}
.content {
  color: #888;
  font-size: 18px;
  text-align: justify;
  padding: 20px;
  margin: 15px 15px 30px 15px
}

<body>
  <div class="columnleft">
    <div id="article1" class="article">
      <div class="title">Headline 1</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore.
      </div>
    </div>
    <div id="article2" class="article">
      <div class="title">Headline 2</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent <br>democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum

      </div>
    </div>
    <div id="article3" class="article">
      <div class="title">Headline 3</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro.Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
      </div>
    </div>
  </div>
  <div class="columnright">
    <div id="article4" class="article">
      <div class="title">Headline 4</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit.
      </div>
    </div>
    <div id="article5" class="article">
      <div class="title">Headline 5</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum

      </div>
    </div>
    <div id="article6" class="article">
      <div class="title">Headline 6</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum
        no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit.
      </div>
    </div>
  </div>
</body>

Answer 5

http://codepen.io/dominicgan/pen/dOJQPY/

css

.elem {
  background: #eee;
  border: solid 1px #ccc;
  margin: 10px;
  padding: 10px;
  width: calc(45% - 20px);
}

js

var elem = document.querySelector('.elem__wrapper');

var msnry = new Masonry(elem, {
  // options
  itemSelector: '.elem'
});

如果您不介意一些 js，masonry 库可以很好地处理这个问题。否则，css 列与@Luuk 所写的一样出色。

在两列页面上显示 HTML 个不同高度的块（事先不知道）

Display HTML blocks of different height (not known in advance) on a two-columns page

html

css

position

css-position