javascript - 无论 Div 高度如何，对齐两列 Div

Question

我遇到了一个问题，我有大量高度各不相同的 div，我希望它们在两列中垂直对齐。我理解为什么第一个 div 比第二个长时它会中断，但我想不出解决方案。

HTML:

 <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>

CSS:

.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;
}

它在 jsfiddle 中.如您所见，如果第二张牌比第一张短，则第三张牌越线。有没有什么好的解决方案可以让每个奇数和偶数 child 分别向左和向右对齐，而不管卡片的高度如何？

Answer 1

您可以通过将 .board-container 的 css 替换为 CSS column layout 来实现这一点。 :

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

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

.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 {
  column-count: 2;
}

<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>