Как мне сделать так, чтобы все кнопки оставались в нижней части div?

ProgramBox

Как мне сделать так, чтобы все кнопки оставались в нижней части div?

Post author:admin
Запись опубликована:19 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

У меня есть 4 кнопки на 4 разных карточках, которые имеют разный размер текста, и мне нужно, чтобы кнопка оставалась внизу, независимо от того, сколько я помещаю текста в карточки

 <div class="pricing-block">
 <div class="pricing-cards">
   <b class="pricing-tittle">Unlimited</b>
   <p class="pricing-description">79

lt;/p>

   <p class="pricing-features">Feature 1</p>

   <p class="pricing-features">Feature 2</p>

   <p class="pricing-features">Feature 3</p>

   <p class="pricing-features">Feature 4</p>

   <p class="pricing-features">Feature 5</p>

  <button type="button" class="pricing-button">Purchase</button>

 </div>

</div>
.pricing-block{

display: flex;

flex-wrap: wrap;

flex-direction: row;

justify-content: space-evenly;

}

1. Вы либо помещаете весь этот список в один контейнер, либо применяете высоту, и вы просто применяете margin-top:auto; кнопки. в вашем текущем состоянии содержимое определяет высоту, и поскольку в нем нет пустого места, вы не можете выровнять элементы на y axis

Ответ №1:

Поместите переменное содержимое в один раздел, а кнопки в другой, а затем используйте flex-grow, чтобы растянуть переменное содержимое. Вы можете установить высоту родительского элемента, чтобы все карты были одинаковой высоты.

 .pricing-block{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
}


.pricing-card {
  height: 300px;
  display: flex;
  flex-direction: column;
  border: solid 1px #d4d4d4;
  padding: 8px;
 }
 
 .pricing-card-header {
    flex-shrink:0;
    border-bottom: solid 1px #d4d4d4;
 }
 .pricing-card-body {
    flex-grow: 1;
 }
 
  .pricing-card-footer {
    flex-shrink:0;
      padding: 8px;
    border-top: solid 1px #d4d4d4;
 }

 <div class="pricing-block">
 <div class="pricing-card">
    <div class="pricing-card-header">
      <p class="pricing-description"> <b class="pricing-tittle">Unlimited</b> 79

lt;/p>

   </div>

   <div class="pricing-card-body">

     <p class="pricing-features">Feature 1</p>

     <p class="pricing-features">Feature 2</p>

     <p class="pricing-features">Feature 3</p>

     <p class="pricing-features">Feature 4</p>

     <p class="pricing-features">Feature 5</p>

   </div>

   <div class="pricing-card-footer">

     <button type="button" class="pricing-button">Purchase</button>

   </div>

 </div>
  <div class="pricing-card">

    <div class="pricing-card-header">
      <p class="pricing-description"> <b class="pricing-tittle">Unlimited</b> 79

lt;/p>

   </div>

   <div class="pricing-card-body">
     <p class="pricing-features">Feature 1</p>

     <p class="pricing-features">Feature 2</p>

   </div>

   <div class="pricing-card-footer">

     <button type="button" class="pricing-button">Purchase</button>

   </div>

 </div>
   <div class="pricing-card">

    <div class="pricing-card-header">
      <p class="pricing-description"> <b class="pricing-tittle">Unlimited</b> 79

lt;/p>

   </div>

   <div class="pricing-card-body">
     <p class="pricing-features">Feature 1</p>

     <p class="pricing-features">Feature 2</p>

     <p class="pricing-features">Feature 3</p>

     <p class="pricing-features">Feature 4</p>

   </div>

   <div class="pricing-card-footer">

     <button type="button" class="pricing-button">Purchase</button>

   </div>

 </div>

</div>

Ответ №2:

Упаковка вашего ценового контента в div, а затем его увеличение ( flex-grow: 1 ) гарантирует, что кнопки останутся внизу.

 .pricing-block{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
}

.pricing-cards {
  display: flex;
  flex-direction: column;
}

.pricing-cards-content {
  flex-grow: 1;
}

 <div class="pricing-block">
  <div class="pricing-cards">
    <div class="pricing-cards-content">
      <b class="pricing-tittle">Unlimited</b>
      <p class="pricing-description">79

lt;/p>

      <p class="pricing-features">Feature 1</p>

      <p class="pricing-features">Feature 2</p>

      <p class="pricing-features">Feature 3</p>

    </div>

    <button type="button" class="pricing-button">Purchase</button>

  </div>

  <div class="pricing-cards">

    <div class="pricing-cards-content">

      <b class="pricing-tittle">Unlimited</b>

      <p class="pricing-description">79

lt;/p>

      <p class="pricing-features">Feature 1</p>

      <p class="pricing-features">Feature 2</p>

    </div>

    <button type="button" class="pricing-button">Purchase</button>

  </div>

</div>

Ответ №3:

 Hopefully works for you!

предоставленная ссылка, которая поможет вам кодировать

 .container {
  position: relative;
  padding: 30px;
  display: flex;
}
.pricing-block{
display: flex;
/* flex-wrap: wrap; */ Removed
flex-direction: row;
/* justify-content: space-evenly; */ Removed
}
.pricing-button { display: flex; }
.pricing-cards { margin-left: 20px; }

 <div class="container">
<div class="pricing-block">
 <div class="pricing-cards">
   <b class="pricing-tittle">Unlimited</b>
   <p class="pricing-description">79

lt;/p>

   <p class="pricing-features">Feature 1</p>

   <p class="pricing-features">Feature 2</p>

   <p class="pricing-features">Feature 3</p>

   <p class="pricing-features">Feature 4</p>

   <p class="pricing-features">Feature 5</p>

  <button type="button" class="pricing-button">Purchase</button>

 </div><!-- First Card -->

  <div class="pricing-cards">

   <b class="pricing-tittle">Unlimited</b>

   <p class="pricing-description">79

lt;/p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>

  <button type="button" class="pricing-button">Purchase</button>

 </div><!-- Second Card -->

  <div class="pricing-cards">

   <b class="pricing-tittle">Unlimited</b>

   <p class="pricing-description">79

lt;/p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

  <button type="button" class="pricing-button">Purchase</button>

 </div><!-- Third Card -->
  <div class="pricing-cards">

   <b class="pricing-tittle">Unlimited</b>

   <p class="pricing-description">79

lt;/p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>

  <button type="button" class="pricing-button">Purchase</button>

 </div><!-- Fourth Card -->

</div>

Метки: Как мне сделать так, чтобы все кнопки оставались в нижней части div?