Javascript 对齐两列Div而不考虑Div高度

我有一个问题，我有一吨的div都在不同的高度，我希望他们在两列垂直对齐。我理解为什么第一个div比第二个div长，它会断开，但我想不出解决方法

HTML:

---

在这里。如你所见，如果第二张牌比第一张牌短，第三张牌就会断开。是否有一个好的解决方案，可以使每个奇数子项和偶数子项分别向左和向右对齐，而不考虑卡的高度？

您是否尝试过使用flexbox

---

通过将.board容器的css替换为：

.板卡{ 保证金：0自动； 边框：1px纯黑； 边界半径：5px； 宽度：250px； 边缘底部：30px； 垫底：20px； 位置：相对位置； } .板卡h1{ 文本对齐：居中； 颜色：d85656； 字号：200； 保证金：0； 填充：0； 左：15px； } .板卡h2{ 文本对齐：居中； 颜色：黑色； 字体大小：400； 保证金：0； 填充：0； 右：15px； } .板卡h1、.板卡h2{ 利润上限：4倍； 字体大小：24px； 位置：绝对位置； } .板卡说明{ 颜色：黑色； 字体大小：300； 保证金：0； 填充：20px； } .板卡说明{ 利润上限：35px； 宽度：100%； 边框顶部：1件纯黑； } .纸板箱{ 列数：2； } 卡1 古怪的 这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字。这里有大量的文字

卡2 即使 这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字

卡片3 古怪的 这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字。这里有更多的文字

卡4 即使 还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字。还有更多的文字，还有更多的文字。还有更多的文字

---

谢谢你的回答！我没有想到这一点，但我也不想让盒子有同样的高度。我更愿意看到每个框都有自己的高度。注意，你也可以使用CSS网格。这里最简单的是列CSS或用于更好布局的砖石脚本，最坚固的布局Flex需要设置高度才能将内容包装到下一列，网格需要跨行。网格和柔性不是用来自然绘制不同高度的柱。

 <div class="board-container">
      <div class="board-card">
            <h1>CARD #1</h1>
            <h2>ODD</h2>

        <div class="board-card-desc">
          <p> A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here.</p>
        </div>
  </div>

  <div class="board-card">
        <h1>CARD #2</h1>
        <h2>EVEN</h2>

        <div class="board-card-desc">
          <p> Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
        </div>
  </div>
  <div class="board-card">
        <h1>CARD #3</h1>
        <h2>ODD</h2>

        <div class="board-card-desc">
          <p> More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. </p>
        </div>
  </div>

  <div class="board-card">
        <h1>CARD #4</h1>
        <h2>EVEN</h2>

        <div class="board-card-desc">
          <p> And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text.And even more text. And even more text.  </p>
        </div>
  </div>

</div>

.board-card {
  margin: 0 auto;
  border: 1px solid black;
  border-radius: 5px;
  width: 250px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  position: relative;
}

.board-card:nth-child(odd) {
  float: left;
  margin-left: 30px;
}

.board-card:nth-child(even) {
  float: right;
  margin-right: 30px;
}

.board-card h1 {
  text-align: center;
  color: #d85656;
  font-weight: 200;
  margin: 0;
  padding: 0;
  left: 15px;
}

.board-card h2 {
  text-align: center;
  color: black;
  font-weight: 400;
  margin: 0;
  padding: 0;
  right: 15px;
}

.board-card h1, .board-card h2 {
  margin-top: 4px;
  font-size: 24px;
  position: absolute;
}

.board-card-desc p {
  color: black;
  font-weight: 300;
  margin: 0;
  padding: 20px;
}

.board-card-desc {
  margin-top: 35px;
  width: 100%;
  border-top: 1px solid black;
}

.board-container {
  margin: 0 auto;
  overflow: auto;
  width: 600px;
}

.board-container {
  margin: 0 auto;
  overflow: auto;
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.board-container {
  column-count: 2;
}