避免文本在CSS中推送div放置

Question

我有一个动态改变长度的文本，当长度增加时，它会将div向右推进到右边。我想要的是确保文本长度不影响右边的div，而不是推动它。文本以一个char开头，不会超过两个char。

在下面的图片中，我试图首先说明问题，以及我希望它看起来如何。

#hjertePic {
position: relative;
margin-top: 29%;
margin-right: 26%;
float: right;
margin-left: 25%;
}

#heartCount {
position: relative;
float: left;
margin-top: 5%;
margin-left: 20%;
margin-right: 5%;
font-size: 100px;
color: white;
text-align: center;
}

heartCount是文本，而hjertePic是我不想移动的div。感谢我能得到的所有帮助。 ：）

Answer 1

您可能希望使用display: inline-block和包含数字的div的固定宽度：

.row .number, .row .text {
  display: inline-block;
}

.row .number {
  width: 20px;
}

<div class="row">
  <div class="number">1</div>
  <div class="text">DIV</div>
</div>
<div class="row">
  <div class="number">2</div>
  <div class="text">DIV</div>
</div>
<div class="row">
  <div class="number">13</div>
  <div class="text">DIV</div>
</div>