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。由于您是法语，因此这是CSS中position的法语文档。

相对于其最接近的祖先进行定位（如果有）；否则，它将相对于初始包含块放置。

由于您没有任何具有position: absolute的父元素，因此该元素将根据视口处于绝对位置

为得到答案，我为购物车号召性用语创建了一个容器，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>

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

根据左侧图标而不是文字

1 个答案: