1

Не могу понять, как в моём случае сделать кнопки на одном уровне.

Перепробовал много вариантов, но кнопки так и не выровнялись.

введите сюда описание изображения

.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>

4
  • У вас ".package-item" с flex и space-between. А внутри всего один элемент. Вынесите кнопку ".package-btn" на уровень выше. И все три кнопки прижмёт к низу карточки. 18 мая 2023 в 13:24
  • Можно абсолютным позиционированием поставить в нужное место...
    – ksa
    18 мая 2023 в 13:29
  • @PavelNazarian точно! спасибо)
    – Denis
    18 мая 2023 в 13:32
  • Или нужно чтобы все было не фиксировано... А как самый "нижний" вариант?
    – ksa
    18 мая 2023 в 13:32

1 ответ 1

2

Можно сделать следующее:

  • Для .package-item-container мы зададим следующие стили:
height: 100%;
display: flex;
flex-direction: column;
  • А для .package-btn мы изменим margin на auto auto 0 auto, тем самым мы сделаем сверху и по бокам максимальный отступ, чтобы прижать к низу. (Использовать margin: auto нам позволил display: flex у родителя и его 100% высота)

Если нужно прижать и цену, то вместо кнопки, давайте такой margin для цены.

.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;
  
  /* added */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.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: auto auto 0 auto; /* added */
}

.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>

3
  • Личное мое мнение, у элемента не должно быть отступов снизу. А вот у элемента под ним должен быть отступ сверху. 18 мая 2023 в 13:38
  • моё мнение наоборот :) 18 мая 2023 в 15:06
  • @PeterKolosov, обоснуйте свою позицию. 18 мая 2023 в 15:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.