在3列div

Question

我不知道如何在标题中说出来，我想在中间栏填充这个剩余高度。

现在是：

这就是我想要的：

我使用1000px的所有容器，在里面我有面板

.contentPanel{
    float: left;
    width: 31%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}

但是我不知道如何更改它，就像我在第二个屏幕截图上一样。

Answer 1

jsfiddle

这仅使用原始css3列（甚至不使用flex）。

基本理念：

＆＃13;

＆＃13;

.card {
  background-color: white;
  break-inside: avoid;
  padding: 1rem;
  margin-bottom: 1rem;
}

.card:nth-child(2n) {
  break-after: column;
}

main {
  background-color: whitesmoke;
  column-count: 3;
  column-gap: 1rem;
}

＆＃13;

<main>
  <div class="card">
    1
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
    </p>
  </div>
  <div class="card">
    2
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    </p>
  </div>
  <div class="card">
    3
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </p>
  </div>
  <div class="card">
    4
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
  </div>
  <div class="card">
    5
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </p>
  </div>
  <div class="card">
    6
    <hr/>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    </p>
  </div>
</main>

＆＃13;

＆＃13;

＆＃13;