仅使用 CSS 的等高多列/多元素布局 [重复]

Question

我想看看是否有人知道一个技巧来解决这个问题，只使用 CSS：

假设我有两列、三列或四列布局（数字是动态的），这些列中的每一列内部将有 5 个不同的部分，并且这些部分中的每一个都有可变数量的内容。

是否可以仅使用 CSS（而不是 JS 均衡器解决方案）将每个部分与兄弟列的部分垂直对齐，即使它们的内容高度不同？

我知道使用表格会很容易，但如果有四个以上的项目，我必须将布局完全切换到行。

我尝试使用 Flexbox，但没有达到预期的效果，我不确定是否可以将 Grid 与可变数量的列一起使用。

我尝试使用 Flexbox 来实现，如 Codepen 中所示 https://codepen.io/ramonlapenta/full/gowLqw/

由于能够使每个部分在可用空间中平均增长（拉伸），因为.item-compare div 已经拉伸到与其兄弟姐妹相同的高度，但这不起作用，因为增长/收缩属性是指可用空间，而不是项目的内容。

Answer 1

使用 CSS Grid 可以做到这一点，但您必须有一个容器，因此 HTML 结构必须完全不同。

类似：

这确实有一些逻辑......

这是自动工作的，因为只有 3 组项目，所以 repeat(3, 1fr) 是一个 magic 数字。

对于更动态的方法，有自动调整选项。

此外，您可以定义每个班级将坐在哪个grid-row..例如：

.item-compare-title {
 grid-row:2;
}

等等

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  width: 95%;
  margin: auto;
}

.container>div {
  border: 1px solid grey;
}

.item-compare-img img {
  max-width: 100%;
  height: auto;
}

.item-compare-title {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.item-compare-model {
  margin-top: auto;
}

<div class="container">
  <div class="item-compare-img">
    <img src="http://www.cagpurification.com/images/sce/product_images/Chiller%20Picture%201.jpg" alt="Chiller">
  </div>
  <div class="item-compare-img">
    <img src="http://www.cagpurification.com/images/sce/product_images/Chiller%20Picture%201.jpg" alt="Chiller">
  </div>
  <div class="item-compare-img">
    <img src="http://www.cagpurification.com/images/sce/product_images/Chiller%20Picture%201.jpg" alt="Chiller">
  </div>
  <div class="item-compare-title">
    <h4>Ecodan Heatpump that pumps heat out to the world</h4>
    <div class="item-compare-model">
      <p>PUHZ-W682387H / 5KW</p>
    </div>
  </div>
  <div class="item-compare-title">
    <h4>Ecodan Heatpump</h4>
    <div class="item-compare-model">
      <p>PUHZ-W682387H / 5KW</p>
    </div>
  </div>
  <div class="item-compare-title">
    <h4>Ecodan Heatpump</h4>
    <div class="item-compare-model">
      <p>PUHZ-W682387H / 5KW</p>
    </div>
  </div>
  <div class="item-compare-feat">
    <ul class="list-compare-feat">
      <li class="compare-feat-item">USP / Feature goes here</li>
      <li class="compare-feat-item">USP / Feature goes here</li>
    </ul>
  </div>
  <div class="item-compare-feat">
    <ul class="list-compare-feat">
      <li class="compare-feat-item">USP / Feature goes here</li>
      <li class="compare-feat-item">USP / Feature goes here with a longer title for testing</li>
      <li class="compare-feat-item">USP / Feature goes here another long title</li>
      <li class="compare-feat-item">USP / Feature goes here</li>
    </ul>
  </div>
  <div class="item-compare-feat">
    <ul class="list-compare-feat">
      <li class="compare-feat-item">USP / Feature goes here</li>
      <li class="compare-feat-item">USP / Feature goes here</li>
      <li class="compare-feat-item">USP / Feature goes here</li>
    </ul>
  </div>
  <div class="item-compare-attr">
    <ul class="list-compare-attr">
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Net dimensions</span>
        <span class="compare-attr-value">154 x 558 x 557 mm</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Cooling capacity</span>
        <span class="compare-attr-value">3.4 kW</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">ErP Rating</span>
        <span class="compare-attr-value">A+++ / A+++</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Noise Level</span>
        <span class="compare-attr-value">23 dB</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Something</span>
        <span class="compare-attr-value">655</span>
      </li>
    </ul>
  </div>
  <div class="item-compare-attr">
    <ul class="list-compare-attr">
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Net dimensions</span>
        <span class="compare-attr-value">154 x 558 x 557 mm</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Cooling capacity</span>
        <span class="compare-attr-value">3.4 kW</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Noise Level</span>
        <span class="compare-attr-value">23 dB</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Something</span>
        <span class="compare-attr-value">655</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Noise Level</span>
        <span class="compare-attr-value">23 dB</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Something</span>
        <span class="compare-attr-value">655</span>
      </li>
    </ul>
  </div>
  <div class="item-compare-attr">
    <ul class="list-compare-attr">
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Net dimensions</span>
        <span class="compare-attr-value">154 x 558 x 557 mm</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Cooling capacity</span>
        <span class="compare-attr-value">3.4 kW</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">ErP Rating</span>
        <span class="compare-attr-value">A+++ / A+++</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Noise Level</span>
        <span class="compare-attr-value">23 dB</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Something</span>
        <span class="compare-attr-value">655</span>
      </li>
    </ul>
  </div>
</div>

Codepen.io demo