将按钮保留在网格末尾，并且图像上的文本/png在最小化时不会保留在原始位置

Question

我正在尝试创建一个供个人使用的网站，但面临一些问题，即按钮没有粘在网格底部，并且作为“card-”下的类的顶部图像没有保持固定位置。我知道我可以使用媒体查询来实现这一点，但正在寻求更好的解决方案。我已阅读与我的问题相关的所有问题，但没有一个解决问题。

我尝试了以下代码并期待更好的解决方案，以便我也可以学习。

<div class="content-b">
                <div class="card-a">
                    <img src="https://static.vecteezy.com/system/resources/thumbnails/011/412/771/small/abstract-vector-background-bg-purple-blue-pink-gradient-dots-pattern-curve-lines-photo.jpg" class="image" alt="bg">
                    <div class="top-image">
                        <span><img src="https://img.freepik.com/premium-psd/color-wing-png-isolated-transparent-background_1034016-9965.jpg"></span>
                        <h2>Lorem ipsum dolor sit</h2>
                    </div>
                    <div class="card_content">
                        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse.</p>
                        <button type="button" onclick="location.href='academics.html'" >See more</button>
                    </div>
                </div>
<div class="card-b">
                    <img src="https://static.vecteezy.com/system/resources/thumbnails/011/412/771/small/abstract-vector-background-bg-purple-blue-pink-gradient-dots-pattern-curve-lines-photo.jpg" class="image" alt="bg">
                    <div class="top-image">
                        <span><img src="https://img.freepik.com/premium-psd/color-wing-png-isolated-transparent-background_1034016-9965.jpg"></span>
                        <h2>Lorem ipsum dolor sit</h2>
                    </div>
                    <div class="card_content">
                        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse.</p>
                        <button type="button" onclick="location.href='academics.html'" >See more</button>
                    </div>
                </div>
</div>

:root{
    --primary-color: #00605f;
    --secondary-color: #017479;
    --text-dark:#0f172a;
    --text-light:#94a3b8;
    --white:#ffffff;
    --hover-color:#E5E4E2;
    --max-width: 1400px;
}
.content-b{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:"card-a card-b card-c";
    gap: 1rem;
}
.card-a{
    grid-area: card-a;
    box-shadow: 2px 2px 20px rgba(0,0,0,.7);
    background:var(--white);
    display: flex;
    flex-direction: column;
    position: relative;
}
.card-b{
    grid-area: card-b;
    box-shadow: 2px 2px 20px rgba(0,0,0,.7);
    background:var(--white);
    display: flex;
    flex-direction: column;
    position: relative;
}
.card-c{
    grid-area: card-c;
    box-shadow: 2px 2px 20px rgba(0,0,0,.7);
    background:var(--white);
    display: flex;
    flex-direction: column;
    position: relative;
}
.content-b img{
    width: 100%;
    height: 15rem;
    object-fit: cover;
    opacity: .35;
    -moz-opacity:0.35;
  -khtml-opacity: 0.35;
}
.top-image {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  text-align:center;
}
.top-image span{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.top-image span > img{
    position:absolute;
    opacity: 1;
  width:2rem;
  height: 2em;
}
.top-image h2{
    text-transform: uppercase;
    font-size: 2rem;
    text-align: center;
}
.card_content{
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.card_content h4{
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}
.card_content p{
    margin-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.5rem;
    color: var(--text-light);
}
.card_content button{
    padding: .5rem 1rem;
    outline: none;
    border: none;
    font-weight: 500;
    color: var(--white);
    background-color: var(--primary-color);
    cursor:pointer;
    bottom: 0;
    font-size: .8rem;
    width: 40%;
}
.card_content .btn:hover,.card_content .btn:focus{
    background: var(--secondary-color);
}

Answer 1

按钮调节： 对按钮上方的内容使用 flex-grow，确保按钮位于每张卡片的底部。 添加 margin-top: auto;到按钮，使其将自己推到卡的底部。

.card_content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card_content button {
    margin-top: auto; /* use this line will sort your issue */
    padding: .5rem 1rem;
    outline: none;
    border: none;
    font-weight: 500;
    color: var(--white);
    background-color: var(--primary-color);
    cursor: pointer;
    font-size: .8rem;
    width: 40%;
}

要使图像保持固定，您可以使用此代码：我希望它有效：

.top-image {
    position: absolute;
    top: 8%; /* this value is use as per your requirments */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

.top-image img {
    width: 2rem;
    height: 2rem;
}