使用 CSS 将 div 定位在其容器的底部？ [关闭]答案

【问题标题】：Position a div at the bottom of its container using CSS? [closed]使用 CSS 将 div 定位在其容器的底部？ [关闭]
【发布时间】：2022-01-03 17:47:07
【问题描述】：

如何使用 CSS 将 div 定位在其容器的底部？容器大小不固定。

感谢您帮助解决我的问题

现场演示见评论

问题截图

我想要的结果

【问题讨论】：

你的代码在哪里？
你的笔是空的，放一些墨水（代码）并再次分享链接。
好的，但我正在更新我的问题codepen.io/drsumair/pen/PoJeYdK
添加位置：absolute in button wrap div并在父div中添加padding-bottom

标签： html css bootstrap-4

【解决方案1】：

 .buy-tg{
        font-weight: 700;
        color: #1562ad;
    }
    #pro-price {
        background-color: #f1f2f3;
    }

    .card-pricing.popular {
        z-index: 1;
        border: 3px solid #1562ad;
    }

    .card-pricing .list-unstyled li {
        padding: .5rem 0;
        color: #6c757d;
    }

    .div-button {
        color: black;
    }
.card-deck {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.card-deck .card {
    margin-bottom: 15px;
}
@media (min-width: 576px) {
    .card-deck {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .card-deck .card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 15px;
        margin-bottom: 0;
        margin-left: 15px;
    }
}


/*added css*/
.card-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="pro-price pt-5" id="pro-price">
        <div class="container mt-5">
            <div class="pricing card-deck flex-column flex-md-row mt-5">
                <div class="card card-pricing text-center px-3 mb-4">
                    <span
                        class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Single User</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="15">$<span
                                class="price">3</span></h1>
                    </div>
                    <div class="card-body pt-0">
                        <div class="position-a">
                        <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                        </ul>
                        </div>
                        <div class="position-b">
                        <button type="button" class="btn btn-primary mb-3">Pay with share*it</button>
                        <p class="div-button">Or</p>
                        <button type="button" class="btn btn-primary mb-3">Pay with Paypal</button>
                        </div>
                    </div>
                </div>
                <div class="card card-pricing popular shadow text-center px-3 mb-4">
                    <span
                        class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Administrator License</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span
                                class="price">6</span></h1>
                    </div>
                    <div class="card-body pt-0">
                        <div class="position-a">
                        <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Monthly updates</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                            <li>Free cancelation</li>
                            <li>Free cancelation</li>
                        </ul>
                        </div>
                        <div class="position-b">
                        <button type="button" class="btn btn-primary mb-3">Pay with share*it</button>
                        <p class="div-button">Or</p>
                        <button type="button" class="btn btn-primary mb-3">Pay with Paypal</button>
                        </div>
                    </div>
                </div>
                <div class="card card-pricing text-center px-3 mb-4">
                    <span
                        class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Technician License</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span
                                class="price">9</span></h1>
                    </div>
                    <div class="card-body pt-0">
                        <div class="position-a">
                        <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                            <li>Free cancelation</li>
                        </ul>
                        </div>
                        <div class="position-b">
                        <button type="button" class="btn btn-primary mb-3">Pay with share*it</button>
                        <p class="div-button">Or</p>
                        <button type="button" class="btn btn-primary mb-3">Pay with Paypal</button>
                        </div>
                    </div>
                </div>
                <div class="card card-pricing text-center px-3 mb-4">
                    <span
                        class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Enterprise License</span>
                    <div class="bg-transparent card-header pt-4 border-0">
                        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="60">$<span
                                class="price">12</span></h1>
                    </div>
                    <div class="card-body pt-0">
                        <div class="position-a">
                        <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                        </ul>
                        </div>
                        <div class="position-b">
                        <button type="button" class="btn btn-primary mb-3">Pay with share*it</button>
                        <p class="div-button">Or</p>
                        <button type="button" class="btn btn-primary mb-3">Pay with Paypal</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

【讨论】：

【解决方案2】：

.container {
  height: 300px;
  background-color: skyblue;
  position: relative
}

.element {
  height: 50px;
  width: 50px;
  background-color: pink;
  position: absolute;
  bottom: 0;
}

.element2 {
  height: 50px;
  width: 50px;
  background-color: pink;
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="container">
  <div class="element">
    
  </div>
</div>
<br/>
<div class="container">
  <div class="element2">
  
  </div>
</div>

这段代码会根据容器定位子div元素

【讨论】：

我没有看到笔中的代码。添加代码并分享链接
codepen.io/drsumair/pen/PoJeYdK
为此，您可以增加卡片的底部填充，并将位置设置为绝对，底部设置为 0。这会将按钮定位在底部
codepen.io/vicky1999-the-bold/pen/ExwLxGW

【解决方案3】：

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

<style>
.container {
  display: flex;
  border:1px solid #000;
  height:200px;
}

.box2 {
  margin-top: auto;
  border:1px solid #000;
  height:50px;
}

.box1 {
 
  border:1px solid #000;
  height:50px;
}

</style>

【讨论】：

容器大小不固定

【解决方案4】：

试试这个你的 div

{
  position : relative;
  Bottom:0;
}

【讨论】：

我正在尝试，但文字重叠