强制绝对位置元素和另一个元素之间的空间

Question

我把计数器放在文本区域的右下角，用CSS：

   position: absolute;
   @include right(pxToRem(5));
   bottom: pxToRem(45);
   font-family: $font-family-regular;
   color: $text-color-grey-8;
   font-size: $font-size-12;

使用HTML：

<textarea 
placeholder{{translationService.translate('REPORT_ADD_COMMENT')}}"
ngControl="comment" #comment="ngForm"
[attr.maxlength]="maxLengthReportPost"></textarea>
<span class="form__textarea-counter">{{showCharCounter()}}</span>

textarea的CSS：

min-height: pxToRem(80);
line-height: pxToRem(21);
padding-top: pxToRem(3);
padding-right: pxToRem(13);

结果当开始打字并且接近计数器时，即使在它之下也非常接近计数器

我如何强制计数器和文本之间的spsce

请不要Jquery

Answer 1

您可能会发现这有用，我知道这不是100％完整的证明，但可能会对您有所帮助

＆＃13;

＆＃13;

textarea{
  resize: none;
  width: 100%;
  max-width: 100%; 
  max-height: 100%;
  padding-right: 20px;
}
span{
  position: absolute;
  bottom: 5px;
  right: -15px;
}
.textarea-holder{
  position: relative;
  width: 200px;
}

＆＃13;

<div class="textarea-holder">
  <textarea>
  </textarea>
  <span>11</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

几条评论后完全改变了答案：

请勿将position: absolute用于计数器，而应将其设为display: inline;和float left，并删除容器的heigth，并将其放入容器中作为最后一个元素：

.x1 {
  position: relative;
  background: #ccf;
  width: 400px;
  overflow: hidden;
  border: 1px solid #222;
}
.x2 {
  float: right;
  display: inline;
  background: #fff;
  width: 50px;
  height: 20px;
  border-left: 1px solid #555;
  padding-left: 10px;
}

<div class="x1">asd kja bsd lkj zg kjh iuz kj huz j hjg iuz kjh ku jhg kjh lkj iuz jh kjh iu kj l asd asd asd asd sd asd asd kja bsd lkj zg kjh iuz kj huz j hjg iuz kjh ku jhg kjh lkj iuz jh kjh iu kj l asd kja bsd lkj zg kjh iuz kj huz j hjg iuz kjh kuz j hjg iuz kjh ku jhg kjh lkj iuz jh kjh iu
  <div class="x2">
    counter
  </div>
</div>