<分区>
html - 仅使用 CSS 的等高多列/多元素布局
我想看看是否有人知道解决这个问题的技巧，只使用 CSS:
假设我有一个两列、三列或四列的布局(数字是动态的)，这些列中的每一列都将包含 5 个不同的部分，并且这些部分中的每一个都将包含可变数量的内容。
是否可以仅使用 CSS(而不是 JS 均衡器解决方案)将每个部分与同级列的部分垂直对齐，即使它们的内容高度不同？
我知道使用表格会很容易，但如果元素超过四个，我必须将布局完全切换为行。
我尝试使用 Flexbox 但没有达到预期的结果，而且我不确定我是否可以使用具有可变数量列的网格。
我尝试使用 Codepen 中所示的 Flexbox 来做到这一点 https://codepen.io/ramonlapenta/full/gowLqw/
由于能够使每个部分在可用空间中均匀增长(拉伸(stretch))，因为 .item-compare div 已经拉伸(stretch)到与其 sibling 相同的高度，但是这不起作用，因为增长/收缩属性指的是可用空间，而不是元素的内容。
最佳答案
这可以使用 CSS Grid，但您必须有一个容器，因此 HTML 结构必须完全不同。
类似于:
这确实有一些逻辑...
这是自动运行的，因为只有 3 组元素，所以 repeat(3, 1fr) 是一个 magic 数字。
对于更动态的方法，有自动调整选项。
此外，您还可以定义每个类(class)位于哪个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>关于html - 仅使用 CSS 的等高多列/多元素布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47932768/