Question

我如何包装我的＆＃34; contenteditable＆＃34;图像周围的文字，但在文本进入下一行时阻止图像向下移动？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

移动：

 modified:   Axiom_AIR_25_49_61/Axiom_AIR_25_49_61.pyc
 modified:   Axiom_AIR_25_49_61/__init__.pyc
 modified:   Axiom_AIR_Mini32/AxiomAirMini32.pyc
 modified:   Axiom_AIR_Mini32/__init__.pyc

在文本之前，它应该根据需要包裹图像。你不需要添加浮动或任何东西。

这里有一个上面代码的jsfiddle：https://jsfiddle.net/AndrewL32/fu9epb1s/3/

（我已经编辑了图像路径，例如＆＃39;）

＆＃13;

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

＆＃13;

.note {
    width: 280px;
    height: 130px;
    padding-top: 20px;
    margin-top: 60px;
    margin-left: 25px;
    padding: 2;
    word-break: break-word;
    font-family: Note;
    font-size: 20px;
    background-image: url("http://www.allaboutkidsng.com/images/sticky-notes.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

＆＃13;

Answer 2

将图像放在文本之前，然后应用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>

为什么我的文字不断移动我的图像？

2 个答案: