将元素粘贴到某个位置

Question

我有一个产品卡，其中显示了收视率，并在这种情况下提到“免运费”。如果产品没有评级但可以免费送货，则文字与其他产品卡不一致。如何使所有免费送货的文本在卡上的同一位置对齐？

我不知道该使用哪个位置属性，或者是否需要包装文本以固定其位置。

<div class="body-info">
    ...
    <div class="product-rating">
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star-empty-half"></i>
        <span>4.5/5</span>
    </div>
    <a href="free-shipping">free shipping available</a>
</div>

我应该使用哪个位置属性？

感谢您对我的帮助！

编辑：这是我的问题的屏幕截图

我想补充一点，如果我的产品没有评级，则不会显示“ product-rating div”。

Answer 1

您可以为此使用flexbox。将flex: display添加到“ body-info”中，并将flex-grow: 1添加到文本div中，以便高度将填充等级div的空白区域，从而将运输链接推到卡片的底部。

示例：https://codepen.io/giumagnani/pen/ROGEow

.body-info {
  height: 250px;
  border: 1px solid;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  margin: 10px;
}

.img {
  height: 150px;
  background: #f2f2f2;
}

.text {
  flex-grow: 1;
}

编辑：在这种情况下，我认为最好为元素设置固定的高度，并始终使它们保持相等的空白。您还可以显示一个占位符消息，例如“尚无评分”。

Answer 2

我终于做了：

我使用了@Giu Magnani的代码，并添加了一个if / else语句：

如果免运费显示免运费文本 否则显示高度为18px的空div;

它的工作原理完全符合我的要求！ 感谢所有帮助我并度过美好一天的人！ ：）