我有一種情況，我需要在一些富文本免責(zé)聲明文本前放置一個(gè)上標(biāo)數(shù)字(表示免責(zé)聲明)。豐富的文本深入到一些具有自己風(fēng)格的div中。我怎樣才能讓它像這樣環(huán)繞上標(biāo)呢？

1 sometext sometext sometext sometext ...
sometext sometext ...

相反，我能做的是:

1 sometext sometext ...
  ... sometext sometext

或者

1
sometext sometext ...
... sometext sometext

.container {
  box-sizing: border-box;
}

sup {
  background: yellow;
  display: inline-block;
  padding: 6;
  float: left;
  margin-right: 20px;
  box-sizing: border-box;
}

.RichText {
  background: green;
  box-sizing: border-box;
}

<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="RichTextStyled">
      <div contenteditable="false" translate="no" class="ProseMirror">
        <p>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.
        </p>
      </div>
    </div>
  </div>
</div>

因?yàn)槲壹僭O(shè)你不能改變HTML，你總是可以將SUP向左浮動(dòng)，并給它一個(gè)右邊的空白來(lái)隔開(kāi)它。

sup {
  background: yellow;
  display: inline-block;
  padding: 6;
  float:left;
  margin-right:10px;
}

.RichText {
  background: green;
}

<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="ProseMirror">
      <p>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.</p>
    </div>
  </div>
</div>

可以使用margin-left和margin-right:auto；和位置:絕對(duì)；

.container {
  box-sizing: border-box;
}

sup {
  background: yellow;
  margin-right: auto;
  margin-left: 0;
  position: absolute;
}

.RichText {
  background: green;
  box-sizing: border-box;
}

<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="RichTextStyled">
      <div contenteditable="false" translate="no" class="ProseMirror">
        <p>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.
        </p>
      </div>
    </div>
  </div>
</div>