html - 为什么我的文字一直向下移动我的图像？

Question

如何将我的“contenteditable”文本环绕在图像周围，同时防止图像在文本进入下一行时向下移动？

.note {
  width: 280px;
  height: 130px;
  margin-left: 25px;
  padding: 2;
  word-break: break-word;
  font-family: Note;
  font-size: 20px;
  z-index: 1;
}

<div class="note" contenteditable="true">Pellentesque pharetra mi lacus, vitae rhoncus nulla hendrerit vitae. Vestibulum nec lectus sed tortor maximus commodo.
  <span id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
    <img src="http://lorempixel.com/40/40/abstract/1/" height="30" width="30" align="right" style="vertical-align: top; float: right"/>
  </span>
</div>

Answer 1

将图像放在文本之前，然后应用 float:right 以允许文本围绕图像流动并将图像定位在右上角。

.note {
  width: 280px;
  height: 130px;
  margin-left: 25px;
  padding: 2;
  word-break: break-word;
  font-family: Note;
  font-size: 20px;
  z-index: 1;
}
#close {
  float: right;
}
#close img {
  width: 30px;
  height: 30px;
}

<div class="note" contenteditable="true">
  <span id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/X-icon.png"/>
  </span>
  Pellentesque pharetra mi lacus, vitae rhoncus nulla hendrerit vitae. Vestibulum nec lectus sed tortor maximus commodo.
</div>