Div Alignment при использовании твиттера Любимая анимация

Я видел пример для Twitter Favorite animation и использовал его в своем дизайне для тестирования, и теперь у меня проблема с выравниванием значков, и я не знаю, как это исправить? Может кто-нибудь объяснить мне, пожалуйста?

Ниже вы будете использовать реальный код, и мне нужно, чтобы вся иконка с текстом была в одном столбце, что-то похожее на иконку Twitter, но очень простое.

/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
  $(this).toggleClass('is_animating');
});

/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
  $(this).toggleClass('is_animating');
});
.postfooter {
    display: flex;
    justify-content: flex-start;
    color: #b3b3b3;
    margin-top: 30px;
    font-size: 25px;
}

.postfooter .fa {
    margin-left: 40px;
}

.heart {
    cursor: pointer;
    height: 70px;
    width: 70px;
    background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
    background-position: left;
    background-repeat:no-repeat;
    background-size:2900%;
  }
  
  .heart:hover {
    background-position:right;
  }
  
  .is_animating {
    animation: heart-burst .8s steps(28) 1;
  }
  
  @keyframes heart-burst {
    from {background-position:left;}
    to { background-position:right;}
  }
<!DOCTYPE html>
<html lang="en">

<head>
  
  <meta charset="UTF-8">
  <title>test</title>
  <!-- Font-Awesome CDN -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>

<body>
 

      <div class="postfooter">
          <div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
          <div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
          <div><div class="heart"></div> 16</div>
    </div>
  
</body>

</html>

Источник

1 ответ

Решение

Причина, по которой ваши элементы не выравниваются, заключается в том, что элемент div, содержащий анимацию вашего сердца, является элементом блочного уровня (в отличие от элементов i со значками font-awesome, которые встроены).

Чтобы исправить эту часть, вам просто нужно добавить display: inline-block к элементу сердца. Высота вашего сердечного элемента также составляет 70 пикселей, поэтому для выравнивания других элементов вам также необходимо добавить высоту: 70 пикселей и высоту строки: 70 пикселей; на ваш пост-нижний колонтитул. Наконец, чтобы учесть тот факт, что элемент сердца намного шире, чем другие элементы, вы можете обернуть показатели сердца в промежуток и дать ему отрицательное поле.

/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
  $(this).toggleClass('is_animating');
});

/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
  $(this).toggleClass('is_animating');
});
.postfooter {
    display: flex;
    justify-content: flex-start;
    color: #b3b3b3;
    margin-top: 30px;
    font-size: 25px;
    height: 70px;
    line-height: 70px;
}

.postfooter .fa {
    margin-left: 40px;
}

.heart {
    display: inline-block;
    cursor: pointer;
    height: 70px;
    width: 70px;
    
    background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
    background-position: left;
    background-repeat:no-repeat;
    background-size:2900%;
  }
  .heart-text {
    margin-left: -20px;
  }
  .heart:hover {
    background-position:right;
  }
  
  .is_animating {
    animation: heart-burst .8s steps(28) 1;
  }
  
  @keyframes heart-burst {
    from {background-position:left;}
    to { background-position:right;}
  }
<!DOCTYPE html>
<html lang="en">

<head>
  
  <meta charset="UTF-8">
  <title>test</title>
  <!-- Font-Awesome CDN -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>

<body>
 

      <div class="postfooter">
          <div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
          <div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
          <div class="heart"></div><span class="heart-text">16</span>
          </div>
  
</body>

</html>

Источник
Другие вопросы по тегам