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

Question

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

在下面的图片中，我试图先说明问题，然后才是我希望它看起来如何。

#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>

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

Avoid text to push a div placement in CSS

html

css

css-float