我有一個(gè)swiper,Swiper滑道有不同的高度。我想讓它們都一樣高。我試著使用flexbox和align-items: stretch,但是即使這樣,正如你在下面的圖片中看到的,其他的卡也沒(méi)有長(zhǎng)到最高的卡的高度。
以下是Swiper的HTML:
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active" style="width: 244.667px;margin-right: 10px;">
<div class="benefit-card">
<img src='../../../images/benefits1.png' />
<h5 class="benefit-title">
Report card to parents
</h5>
<p class="benefit-card-description section-body-text">
Get personalized weekly emails to evaluate your child's performance and progress
</p>
</div>
</div>
<div class="swiper-slide swiper-slide-active" style="width: 244.667px;margin-right: 10px;">
<div class="benefit-card">
<img src='../../../images/benefits1.png' />
<h5 class="benefit-title">
Mentor support
</h5>
<p class="benefit-card-description section-body-text">
2 mentor sessions in case of needing help by the kid
</p>
</div>
</div>
</div>
下面是CSS:
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
align-items: stretch;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
}
.benefit-card {
border-radius: 8px;
padding: 1.4rem;
background-color: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
}
我不知道為什么,即使容器有display: flex和align-items: stretch,子容器的高度卻不一樣。感謝任何幫助。謝謝你。