Question

我遇到一个问题，我有很多高度不同的div，我希望它们在两列中垂直对齐。我明白为什么如果第一个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。如您所见，如果第二张卡比第一张卡短，则第三张卡会突破。是否有一个很好的解决方案，让每个奇数和偶数的孩子分别左右对齐，无论卡的高度如何？

Answer 1

通过将.board-container的css替换为CSS column layout，你可以做到这一点：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您是否尝试过使用flexbox？

https://jsfiddle.net/d4mu8eg6/2/

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

无论Div高度如何，都可以对齐两列Div

2 个答案: