如何使div中的图像与其他元素向右对齐

Question

我有一个内联一些项目的div，但是右边的项目是必须在该div中右对齐的图像。

html

<div class='row'>
  <div class='col-md-12'>
    <div class='bank_tribune_speler' data-spelerid='77'>
      <div class='positie'>K</div>
      <img src='img/clubs/shirt.png' class='bank_tribune_shirt' alt='shirt'> 
      <div class='bank_tribune_naam_info'>
        <span class='ellipsis font-weight-bold club_margin_top'>Name</span>
      </div>
      <div class='bank_tribune_wissel'>
        <div class='bank_tribune_wissel_icon'></div>
      </div>
    </div>
  </div>
</div>  

css

.bank_tribune_speler {
  display: flex;
  padding-top: 8px;
  padding-left: 10px;
  border: solid 1px #b5b5b5;
  margin-top: 10px;
}

.bank_tribune_shirt {
  height: 50px;
  width: 50px;
  margin-left: 12px;
  margin-top: -5px;  
}

.positie {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
  width: 40px;
}

.bank_tribune_naam_info {
  font-size: 20px;
  line-height: 22px;
  margin-left: 10px;
  margin-top: -3px;
}

.bank_tribune_wissel_icon {
  background: url("../img/wissel4.jpg");
  height: 40px;
  margin-right: 15px;
  width: 48px;
}

请参见JSFiddle

我希望带有红色和绿色箭头的图像在div中与灰色边框右对齐

我尝试过float：对，text-align：对，但是到目前为止还没有运气....：-（

任何想法如何实现这一目标？

亲切的问候，

Arie

Answer 1

我已经通过使用float实现了：right ....;-）