0

Есть два блока, в каждом разное количество текста. В конце каждого блока есть кнопка, ей заданы отступы с помощью margin.

Из-за того что в блоке разное количество текста, кнопки находятся на разной высоте. А мне нужно что бы они находились на одинаковой высоте. Как это можно сделать?

введите сюда описание изображения UPD 1: Поведение кнопки при анимации. введите сюда описание изображения

.specialty {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e4fdf9;

    -webkit-justify-content: center;
    -webkit-flex-direction: column;
}
.specialty-content {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    flex-wrap: wrap;

    -webkit-justify-content: space-around;
    -webkit-flex-wrap: wrap; 
}
.specialty-content__wrap {
    margin-bottom: 40px;
}
.specialty-content__info {
    display: block;
    margin-bottom: 20px;
    text-align: center;
    word-wrap: break-word;
    background: #fff;
    flex: 0 0 40%;

    -webkit-flex: 0 0 40%;
}
.specialty-content__info img {
    margin: 50px auto 0 auto;
    width: 64px;
    height: 64px;
}
.specialty-content__info h4 {
    font-size: 22px;
    padding: 20px 10px;
}
.specialty-content__info p {
    font-size: 16px;
    padding-bottom: 40px;
    padding: 0 20px 40px 20px;
    text-align: justify;
}
/* Анимация кнопки подробнее */
.specialty-content__info a {
    display: inline-block;
    align-items: center;
    position: relative;
    padding: 10px 20px;
    margin-bottom: 50px;
    font-size: 20px;
    text-transform: uppercase;
    color: #000;
    overflow: hidden;

    transition: 0.3s ease-out 0.3s;
    -webkit-transition: 0.3s ease-out;
    -webkit-transition-delay: 0.3s;
    -moz-transition: 0.3s ease-out 0.3s;
    -o-transition: 0.3s ease-out 0.3s;
}
<div class="specialty">
        <div class="wrap">
            <div class="specialty-title title">
                <h2>Специальности</h2>
            </div>
            <div class="specialty-content__wrap">
                <div class="specialty-content">
                    <div class="specialty-content__info">
                        <img src="img/specialty/desktop.svg" alt="Black">
                        <h4>Lorem</h4>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut perspiciatis itaque, doloribus impedit saepe iure totam consectetur. Provident architecto inventore odio exercitationem distinctio consequatur doloribus rem pariatur, tempora nihil vitae ullam cum dignissimos dolor optio eius laboriosam fugiat beatae tempore quaerat sed. Similique porro nobis corporis dolorum facere reprehenderit commodi!</p>
                        <a href="#" class="specialty-content__btn"><span>Подробнее</span></a>
                    </div>
                    <div class="specialty-content__info">
                        <img src="img/specialty/padlock.svg" alt="Black">
                        <h4>Lorem</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab libero laborum facilis rem facere vero, iure neque doloribus quas laudantium voluptatem aperiam eum. Odio adipisci soluta voluptas tenetur, incidunt et non repellat suscipit, eaque atque nesciunt doloribus. Labore, illo! Explicabo cumque aliquid fugit culpa reiciendis labore ullam necessitatibus? Dignissimos, quibusdam deleniti sapiente impedit, voluptas eos error provident aliquam blanditiis porro ducimus quo beatae corrupti quam, nisi recusandae inventore. Architecto, laboriosam corporis dolorum totam quis praesentium, consequuntur repudiandae dicta, quasi iusto aut perferendis! Ut, saepe distinctio laborum accusantium fuga veritatis? Eligendi, consectetur saepe. Maxime illo ullam, quisquam sed aliquam sunt.</p>
                        <a href="#" class="specialty-content__btn"><span>Подробнее</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

2 ответа 2

2

Смотрите под /-------------------------/

.specialty {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #e4fdf9;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
}

.specialty-content {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -webkit-flex-wrap: wrap;
}

.specialty-content__wrap {
  margin-bottom: 40px;
}

.specialty-content__info {
  margin-bottom: 20px;
  text-align: center;
  word-wrap: break-word;
  background: #fff;
  flex: 0 0 40%;
  -webkit-flex: 0 0 40%;
}

.specialty-content__info img {
  margin: 50px auto 0 auto;
  width: 64px;
  height: 64px;
}

.specialty-content__info h4 {
  font-size: 22px;
  padding: 20px 10px;
}

.specialty-content__info p {
  font-size: 16px;
  padding-bottom: 40px;
  padding: 0 20px 40px 20px;
  text-align: justify;
}


/* Анимация кнопки подробнее */

.specialty-content__info a {
  display: inline-block;
  align-items: center;
  position: relative;
  padding: 10px 20px;
  margin-bottom: 50px;
  font-size: 20px;
  text-transform: uppercase;
  color: #000;
  overflow: hidden;
  transition: 0.3s ease-out 0.3s;
  -webkit-transition: 0.3s ease-out;
  -webkit-transition-delay: 0.3s;
  -moz-transition: 0.3s ease-out 0.3s;
  -o-transition: 0.3s ease-out 0.3s;
}

/*--------------------------------------------------------------*/

.specialty-content__info {
  display: flex;
  flex-direction: column;
}

.specialty-content__btn {
  margin-top: auto;
}
<div class="specialty">
  <div class="wrap">
    <div class="specialty-title title">
      <h2>Специальности</h2>
    </div>
    <div class="specialty-content__wrap">
      <div class="specialty-content">
        <div class="specialty-content__info">
          <img src="img/specialty/desktop.svg" alt="Black">
          <h4>Lorem</h4>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut perspiciatis itaque, doloribus impedit saepe iure totam consectetur. Provident architecto inventore odio exercitationem distinctio consequatur doloribus rem pariatur, tempora nihil
            vitae ullam cum dignissimos dolor optio eius laboriosam fugiat beatae tempore quaerat sed. Similique porro nobis corporis dolorum facere reprehenderit commodi!</p>
          <a href="#" class="specialty-content__btn"><span>Подробнее</span></a>
        </div>
        <div class="specialty-content__info">
          <img src="img/specialty/padlock.svg" alt="Black">
          <h4>Lorem</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab libero laborum facilis rem facere vero, iure neque doloribus quas laudantium voluptatem aperiam eum. Odio adipisci soluta voluptas tenetur, incidunt et non repellat suscipit, eaque
            atque nesciunt doloribus. Labore, illo! Explicabo cumque aliquid fugit culpa reiciendis labore ullam necessitatibus? Dignissimos, quibusdam deleniti sapiente impedit, voluptas eos error provident aliquam blanditiis porro ducimus quo beatae
            corrupti quam, nisi recusandae inventore. Architecto, laboriosam corporis dolorum totam quis praesentium, consequuntur repudiandae dicta, quasi iusto aut perferendis! Ut, saepe distinctio laborum accusantium fuga veritatis? Eligendi, consectetur
            saepe. Maxime illo ullam, quisquam sed aliquam sunt.</p>
          <a href="#" class="specialty-content__btn"><span>Подробнее</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

3
  • Да, это класcное решение добавить display: flex. Но тогда кнопка растягивается на ширину блока. При моей анимации не совсем подходит. Как это можно исправить, растягивание на всю ширину блока?
    – O.Yudin
    4 ноя 2020 в 12:33
  • Можно по центру разместить через align-items: center. Или через align-self. 4 ноя 2020 в 13:02
  • Спасибо, все работает!
    – O.Yudin
    4 ноя 2020 в 13:33
0

Вот пример:

.wrapper {
  width: 500px;
  height: 200px;
  border: 1px dashed red;
  position: relative;
}

.link {
  color: red;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
<div class="wrapper">
  <div class="logo">lorem ipsum</div>
  <div class="some-text">lorem ipusm msupi merol</div>
  <div class="link">da</div>
</div>

Ваш ответ

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

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