如何使按鈕粘在div的底部？[復制]

我如何做到無論盒子里的內容如何，??按鈕“VEZI MAI MULT ->”都會粘在盒子的按鈕上？我嘗試了很多方法，遺憾的是我沒有保存，但這是我現在的位置：

:root{
    --fontSansSerif: 'Inter';
    --fontSerif: 'DM Serif Display';
    --heightDropdown: 250px;
    --bluePigment: #333895;
    --midnightBlue: #1B1164;
    --aliceBlue: #E4EBF8;
    --lightSteelBlue: #B0C5E3;
    --darkSteelBlue: #86ADE3;
}
.oferta-educationala h1{
    margin-bottom: 20px;
}
.oferta{
    display: flex;
    flex-direction: column;
    
    border:solid;
    color: var(--midnightBlue);
}
.oferta-text{
    padding: 20px 20px 0px 20px;
}
.toate-ofertele-ed{
    display: flex;
}

<div class="oferta-educationala">
                <h1>Ofert? Educa?ional?</h1>
                <div style="display:flex;">
                    <div class="toate-ofertele-ed">
                        <div class="oferta">
                            <div class="oferta-text">
                                <p>PROFIL REAL</p>
                                <ul>
                                    <li>Matematic?-Informatic? Bilingv<span>26 locuri</span></li>
                                    <li>Matematic?-Informatic? <span>26 locuri</span></li>
                                    <li>?tiin?e ale naturii <span>52 locuri</span></li>
                                </ul>
                            </div>
                            <div style=
                            "display: flex;
                            align-content: flex-end;
                            justify-content: flex-end;">
                                <button>VEZI MAI MULT &#10230;</button>
                            </div>
                        </div>
                        <div class="oferta">
                            <div class="oferta-text">
                                <p>PROFIL UMAN</p>
                                <ul>
                                    <li>Filologie bilingv <span>26 locuri</span></li>
                                    <li>Filologie <span>26 locuri</span></li>
                                    <li>?tiin?e sociale <span>52 locuri</span></li>
                                </ul>
                            </div>
                            <div style=
                            "display: flex;
                            align-content: flex-end;
                            justify-content: flex-end;
                            ">
                                <button>VEZI MAI MULT &#10230;</button>
                            </div>
                        </div>
                        <div class="oferta">
                            <div class="oferta-text">
                                <p>PROFIL UMAN</p>
                                <ul>
                                    <li>Filologie bilingv <span>26 locuri</span></li>
                                    <li>Filologie <span>26 locuri</span></li>
                                    <li>?tiin?e sociale <span>52 locuri</span></li>
                                </ul>
                            </div>
                            <div style=
                            "display: flex;
                            align-content: flex-end;
                            justify-content: flex-end;
                            ">
                                <button>VEZI MAI MULT &#10230;</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

我也試過將文本和按鈕分成兩個 div，然后將按鈕 div 的垂直對齊設定為按鈕，但無論我如何實作它都不起作用。任何輸入表示贊賞。

uj5u.com熱心網友回復：

:root{
    --fontSansSerif: 'Inter';
    --fontSerif: 'DM Serif Display';
    --heightDropdown: 250px;
    --bluePigment: #333895;
    --midnightBlue: #1B1164;
    --aliceBlue: #E4EBF8;
    --lightSteelBlue: #B0C5E3;
    --darkSteelBlue: #86ADE3;
}
.oferta-educationala h1{
    margin-bottom: 20px;
}
.oferta{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px; /*optional*/
    border:solid;
    color: var(--midnightBlue);
}
.oferta-text{
    padding: 20px 20px 0px 20px;
}
.toate-ofertele-ed{
    display: flex;
}

<div class="oferta-educationala">
                <h1>Ofert? Educa?ional?</h1>
                <div style="display:flex;">
                    <div class="toate-ofertele-ed">
                        <div class="oferta">
                            <div class="oferta-text">
                                <p>PROFIL REAL</p>
                                <ul>
                                    <li>Matematic?-Informatic? Bilingv<span>26 locuri</span></li>
                                    <li>Matematic?-Informatic? <span>26 locuri</span></li>
                                    <li>?tiin?e ale naturii <span>52 locuri</span></li>
                                </ul>
                            </div>
                            <div style="justify-content: flex-end;display: flex;">
                                <button>VEZI MAI MULT &#10230;</button>
                            </div>
                        </div>
                        <div class="oferta">
                            <div class="oferta-text">
                                <p>PROFIL UMAN</p>
                                <ul>
                                    <li>Filologie bilingv <span>26 locuri</span></li>
                                    <li>Filologie <span>26 locuri</span></li>
                                    <li>?tiin?e sociale <span>52 locuri</span></li>
                                </ul>
                            </div>
                            <div style="justify-content: flex-end;display: flex;">
                                <button>VEZI MAI MULT &#10230;</button>
                            </div>
                        </div>
                        <div class="oferta">
                            <div class="oferta-text">
                                <p>PROFIL UMAN</p>
                                <ul>
                                    <li>Filologie bilingv <span>26 locuri</span></li>
                                    <li>Filologie <span>26 locuri</span></li>
                                    <li>?tiin?e sociale <span>52 locuri</span></li>
                                </ul>
                            </div>
                            <div style="justify-content: flex-end;display: flex;">
                                <button>VEZI MAI MULT &#10230;</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

標籤：网页格式CSS

上一篇：css背景影像不顯示影像的底部

下一篇：js實作輸入范圍滑動，滑鼠快速滑動時會有卡頓