css - 使用具有动态高度的 CSS 对齐子 DIV 标签

Question

垂直和水平对齐 div 标签很容易实现，但我正在寻找的是类似于附加图像的东西，其中子 div 标签的高度根据内容而变化。我尝试了很多东西，但无法实现相同的行为。我肯定在某个地方错了。

如果这是重复的帖子，我深表歉意，因为我在任何地方都找不到。

感谢您的指导。

#divContainer {
  width: 100%;
  margin: 0 auto;
}
#divContainer div.innerDIV {
  border: 1px solid #000;
  width: 200px;
  height: auto;
  margin: 5px;
  padding: 5px;
  /*float: left;*/
  display: inline-flex; /* tried many other options */
}

<div id="divContainer">
  <div class="innerDIV">not much text here</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
</div>

预期结果:

Answer 1

尝试使用 CSS 列:

#divContainer {
  width: 100%;
  margin: 0 auto;
  -webkit-columns: 200px 2;
  -moz-columns: 200px 2;
  columns: 200px 2 5px; }
#divContainer div.innerDIV {
  border: 1px solid #000;
  width: 200px;
  height: auto;
  padding: 5px;
  margin: 5px 0;
}

<div id="divContainer">
  <div class="innerDIV">not much text here</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
  <div class="innerDIV">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
</div>