如何将数字放在左边，百分比和单词＆＃39;关闭＆＃39;堆叠在右边

Question

我想做一个20％的文字，但是左边的数字和右边的百分比和偏离。你能给我一个想法吗？ Image to Reference

Answer 1

使用float：left我们可以做到。希望这有帮助。

<div class="container">
  <div style="float:left">
     <div style="font-size:40px;">20</div>
     
  </div>
  <div style="float:left">
  <div >%</div>
   <div >Off</div>
  </div>
</div>

Answer 2

你可以试试这个。

.discount-number-wrapper {
  padding: 0 30px 0 0;
  font-size: 48px;
  position: relative;
  display: inline-block;
  line-height: 1;
}

.discount-number-wrapper:before {
  content: '%';
  font-size: 30px;
  position: absolute;
  top: 2px;
  right: 0;
}

.discount-number-wrapper:after {
  content: 'OFF';
  font-size: 13px;
  position: absolute;
  bottom: 5px;
  right: 0;
}

<div class="discount-number-wrapper">
  20
</div>