【发布时间】：2019-08-11 20:48:34
【问题描述】：
我有多个项目，比如卡片。这些卡片需要水平堆叠，高度必须相同。这正在发生在我身上。
每张卡片都有一个图像、文本和一个按钮。每张卡片的图像和文本应采用任何卡片中的最大高度，以便它们正确对齐。这不会发生在我身上。
如果图像和文本正确对齐，则按钮将始终在底部的每张卡片中对齐。
我一直在关注this tutorial，但我有多张卡片，这里只放了三张。第三张卡片的图像高度也是通过 CSS 设置的。
.partner-cards * {
box-sizing: border-box;
}
.partner-cards {
display: flex;
flex-wrap: wrap;
}
.partner-card {
display: flex;
flex: 1 0 20%;
border-radius: 0;
text-align: center;
border: 3px solid blue;
padding: 5px;/*3rem;*/
margin-bottom: 3rem;
max-width: 20%;
margin: 5px;
}
.partner-card-content {
display: flex;
flex-direction: column;
}
/*
.card-content .image-container img {
margin: 0;
padding: 0;
}
*/
.partner-card-content .partner-image-container {
border: 1px solid green;
padding: 0;
margin: 0;
min-height: 11rem;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
max-width: 100%;
}
.partner-card-content p /*, .card-content .image-container*/
{
flex: 1 0 auto;
border: 1px solid red;
}
.partner-card-content img.third-image {
height: 5.5rem !important;
}
/*
p {
font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/<div class="partner-cards">
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/100x40" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a class="primary-button" href="#">View XXX XXX XXX Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/50x150" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s.</p>
<a class="primary-button" href="#">View YYY Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/120x100" class="third-image" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<a class="primary-button" href="#">View ZZZ Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/50x100" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="primary-button" href="#">View ABC Offer</a>
</div>
</div>
</div>它应该如何显示：
代码笔上的教程图片，正确对齐h2，文本和链接：
【问题讨论】：
-
你不能在相邻的弹性盒中对齐弹性项目...
-
@kukkuz 请看看这个lottejackson.com/learning/an-equal-height-grid-using-flexbox。当
flex: 1 0 auto应用于 p 时，每个项目的链接都与底部对齐。这是codepen上教程的链接codepen.io/lottejackson/embed/…。 -
尝试在该代码中使用不同尺寸的图像/长标题，你会看到
-
@kukkuz 我刚刚检查了 codepen（教程）并在 item1 和 item2 中放置了额外的文本（不同），并且链接在所有项目的底部正确对齐。
-
我没有找到碰撞，而是更改了类，现在
p标记变得相同高度。现在，进入另一个问题，如果一个锚的文本大于容器的宽度，它将换行到下一行。在这种情况下，p不再对齐。而a的起点略高于其余部分。请看一下小提琴中的第一个框jsfiddle.net/learningjsfiddle/8jenc5fx/31