html - 根据左侧而不是文本移动图标

Question

我正在尝试将两个图标彼此对齐，问题是如果我在图标上添加更多文本而不是另一个移动。

我尝试定义大小，左边距，右边距，右边距，......所有类似的东西

/*******
PAGE ARTICLE
*******/
.img-panier{
    text-align: right;
    margin-right: 5%;
}

/*******
PAGE FAVORIS
*******/

.img-poubelle{
    position: absolute;
    text-align: right;
    margin-right: 15%;
    margin-left: 8%;
    width: 5%;

}

.favoris-prix{
    margin-right: 10%;
}

<div class="col">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <!-- IMAGE ARTICLE -->
        <img class="card-img-top" src="images/noimage.png" alt="Card image cap">
        <div class="card-body">
          <!-- DESCRIPTION + TITRE ARTICLE -->
          <h4 class="card-title"><a href="test">test</a></h4>
          <p class="card-text description-article">Test</p>
          <div class="row">
            <!-- PRIX -->
            <div id="favoris-prix">
            <div class="col">
              <strong>testsass CHF</strong>
            </div>
          </div>

            <!-- PANIER -->
            <div class="col img-poubelle">
              <a href="test">
                <img border="0" alt="Supprimer le favori" src="inc/img/poubelle.png" width="30" height="30">
              </a>
            </div>
            <div class="col img-panier">
              <a href="#">
                <img border="0" alt="panier" src="inc/img/panier.png" width="30" height="30">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
 <h5>Aucun article en favoris cà afficher... </h5>
  </div>
</div>

我只展示了这样一个小案例: image

小垃圾桶需要放在购物车旁边，如果文字移动则不会移动。

Answer 1

我不知道你为什么要使用 position: absolute。因为你是法国人，这里是 position 的法语文档在 CSS 中。

It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

由于您没有任何具有position: absolute 的父元素，该元素将根据视口(viewport)采用绝对位置

因此，为了得到答案，我为购物车号召性用语创建了一个容器，row 类具有 display: block ( doc for display) 默认属性，所以我做了将 display: inline-block 放在 favoris-prix 上(注意你选择的是类别而不是原始问题中的 ID)和 panier-cta，一个在 float: left 上，一个在 float: right ( doc for float ) 上，然后我确实在 bin 图标中添加了边距。

/*******
PAGE FAVORIS
*******/
.img-poubelle, .img-panier {display: inline-block;}
.img-poubelle {margin-right: 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <!-- IMAGE ARTICLE -->
        <img class="card-img-top" src="images/noimage.png" alt="Card image cap">
        <div class="card-body">
          <!-- DESCRIPTION + TITRE ARTICLE -->
          <h4 class="card-title"><a href="test">test</a></h4>
          <p class="card-text description-article">Test</p>
          <div class="row">
            <!-- PRIX -->
            <div id="favoris-prix" class="col-6">
            <div>
              <strong>Longer text, very much long wowvery much long wowvery much long wowvery much long wow</strong>
            </div>
          </div>

            <div class="panier-cta col-6">
              <!-- PANIER -->
              <div class="img-poubelle">
                <a href="test">
                  <img border="0" alt="Supprimer" src="inc/img/poubelle.png" width="30" height="30">
                </a>
              </div>
              <div class="img-panier">
                <a href="#">
                  <img border="0" alt="panier" src="inc/img/panier.png" width="30" height="30">
                </a>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
 <h5>Aucun article en favoris cà afficher... </h5>
  </div>
</div>

我改变了左边的文字，图标不会移动。希望它对您有所帮助，如果您需要更多信息，我可以在评论中回答您!