垂直对齐不同高度的文本框，因此一个接一个开始答案

【问题标题】：Aligning different height textboxes vertically, so one starts after the other垂直对齐不同高度的文本框，因此一个接一个开始
【发布时间】：2022-11-03 02:27:59
【问题描述】：

我正在尝试创建文本框以在网站上显示评论。每个评论都在一个框中，这些框的高度将取决于每个框的文本量。下图是我希望它在网站上显示的方式，黑框代表评论框。

但是，我似乎无法找到一种方法来显示这样的文本框，而无需使用 flex 属性将它们全部拉伸到相同的大小，或者根据列中最大的文本框开始一个新行。

我目前的示例代码是：

.container-reviews {
  width: 100%; 
  justify-content: space-between;
}

.box {
  width: 24%;
  background-color: black;
  color: white;
  float: left;
}

<div class="container">

  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  <div class="box">Lorem ipsum dolor sit amet</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div class="box">Lorem ipsum dolor sit amet</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>

</div>

有谁知道我可以如何更改我的代码以使框 div 像上图一样对齐？

【问题讨论】：

标签： html css

【解决方案1】：

使用 column flex 和 box wrapping，然后使用 flex-start 将 box 对齐到顶部。

.container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-content: flex-start;
    max-width: 300px;
    max-height: 320px;
}
.box {
    width: 70px;
    margin: 0 10px 20px 10px;
    background: yellow;
    text-align: center;
}

<div class="container">
    <div class="box" style="height:50px">Box 1</div>
    <div class="box" style="height:100px">Box 2</div>
    <div class="box" style="height:90px">Box 3</div>
    <div class="box" style="height:50px">Box 4</div>
    <div class="box" style="height:30px">Box 5</div>
    <div class="box" style="height:70px">Box 6</div>
    <div class="box" style="height:40px">Box 7</div>
    <div class="box" style="height:80px">Box 8</div>
    <div class="box" style="height:90px">Box 9</div>
    <div class="box" style="height:100px">Box 10</div>
    <div class="box" style="height:120px">Box 11</div>
</div>

【讨论】：