在多张卡片上对齐元素时遇到问题[重复]

Question

我一直面临着在多张卡片上对齐文本的挑战。文本（标题）的长度有所不同，因此下面的元素会向下移动。第一个是输出，第二个是我的 html 的结构。

 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="box">
                    <div class="img">
                        <img src="..." alt="img">
                    </div>
                    <div class="info">
                        <div class="title"><p>Title</p></div>
                        <p>description</p>
                        <div class="btn">
                            <a href="">button</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="box">
                    <div class="img">
                        <img src="..." alt="img">
                    </div>
                    <div class="info">
                        <p>Title</p>
                        <p>description</p>
                        <div class="btn">
                            <a href="">button</a>
                        </div>
                    </div>
                </div>
            </div>
    ...

我将 swiper-slide 的高度设置为

height: auto

并将

.info

高度设置为

height:100%;

以确保卡片/滑块拉伸到容器。这样按钮就可以对齐了。

根据我读到的内容，flexbox 采用最大孩子的高度并应用于所有孩子。所以我尝试在 style.css 中将

flex:display

、

flex-direction:column

添加到 .info 并将

margin-top:auto

添加到

.btn

，但并没有真正改变太多。

我正在寻求有关如何应用 CSS 的建议，以确保一致的间距和对齐方式，无论多张卡片上的标题长度如何。

如有任何帮助，我们将不胜感激！

Answer 1

您可以尝试这个，使用 Flexbox 并对 CSS 进行一些调整，如下所示： 现在，我清楚地认为这会有所帮助，

.swiper-container {
    display: flex;
    justify-items: center;
    align-items: center;
    height: 100%;
}

.swiper-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: end;
    text-align: center;
}

.box {
    display: flex;
    flex-direction: column;
}

.info {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 300px;
}

.btn {
    margin-top: auto;
    background-color: aqua;
    border-radius: 20px;
    padding: 10px;
}

img {
    width: 300px;
}