我无法弄清楚如何在我的情况下使按钮处于同一水平。
我尝试了很多选项,但按钮没有对齐。
.package-items {
margin-left: 40px;
margin-right: 40px;
}
.package-items-container {
justify-content: center;
}
.row {
display: flex;
}
.package-item {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
width: 414px;
background: #B2C1C1;
border-radius: 20px;
}
.package-item-container {
padding: 60px 50px;
}
.package-subtitle {
font-family: 'Sreda';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 36px;
text-align: center;
color: #4F4F4F;
}
.package-list {
margin: 60px auto 50px auto;
width: fit-content;
}
.package-li {
padding: 5px;
width: fit-content;
list-style: inside;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #000000;
}
.package-price {
margin: 0 0 20px 0;
text-align: center;
font-family: 'Sreda';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 36px;
text-decoration-line: underline;
color: #646464;
}
.package-btn {
margin: 0 auto;
}
.package-item:nth-child(2) {
background: #BAD5D5;
}
.package-item:nth-child(3) {
background: #9FBFBF;
}
.btn {
background: #D6F2FE;
border-radius: 5px;
height: 50px;
width: 184px;
position: relative;
}
.btn a {
justify-content: center;
align-items: center;
display: flex;
width: 100%;
font-size: 16px;
height: 100%;
color: #333333;
}
<section class="package-section">
<div class="package-container">
<div class="package-content">
<div class="package-items">
<div class="package-items-container row">
<div class="package-item">
<div class="package-item-container">
<div class="package-subtitle">
<h3>Small business solutions</h3>
</div>
<div class="package-list">
<ul class="package-ul">
<li class="package-li">support of small</li>
<li class="package-li">support of small </li>
<li class="package-li">support of small </li>
<li class="package-li">medium-sized businesses</li>
</ul>
</div>
<div class="package-price">200$</div>
<div class="package-btn btn"><a href="#">Choose</a></div>
</div>
</div>
<div class="package-item">
<div class="package-item-container">
<div class="package-subtitle">
<h3>Digital coordination</h3>
</div>
<div class="package-list">
<ul class="package-ul">
<li class="package-li">consultancy for a business</li>
<li class="package-li">consultancy for a business </li>
<li class="package-li">consultancy for a business </li>
<li class="package-li">consultancy for a business</li>
<li class="package-li">consultancy for a business</li>
<li class="package-li">consultancy for a business </li>
<li class="package-li">consultancy for a business </li>
<li class="package-li">consultancy for a business</li>
</ul>
</div>
<div class="package-price">500$</div>
<div class="package-btn btn"><a href="#">Choose</a></div>
</div>
</div>
<div class="package-item">
<div class="package-item-container">
<div class="package-subtitle">
<h3>Business cooperation</h3>
</div>
<div class="package-list">
<ul class="package-ul">
<li class="package-li">complex solutions</li>
<li class="package-li">building individual promotion systems</li>
<li class="package-li">a personal manager who leads the project</li>
</ul>
</div>
<div class="package-price">1000$</div>
<div class="package-btn btn"><a href="#">Choose</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

您可以执行以下操作:
.package-item-container我们将设置以下样式:.package-btn我们将更改为margin,auto auto 0 auto因此我们将在顶部和侧面制作最大缩进,以便将其压到底部。(使用margin: auto允许我们display: flex在父母及其 100% 高度)如果您还需要按下价格,那么我们使用一个按钮代替
margin价格。