如何垂直偏移浮动图像？

Question

我正在制作一个包含一些文本的页面，但我想在文本的右侧插入一个图像。我设法使文本环绕图像，但似乎我不能移动图像，除了文本的左右。我想垂直移动图像。

下面是我的图片代码：

​

img {
  width: 20%;
  height: auto;
  margin: 10px;
}

#test {
  float: right;
}

<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p>&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur
  lorem. Nam condimentum neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque
  varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor
  ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl
  dapibus non. Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur
  non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus
  finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor
  ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus
  lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien.
  Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce
  lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc,
  sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>

​

有人能帮帮我吗？

Answer 1

shape-outside可以做到

​

img {
  width: 20%;
  height: auto;
  margin: 10px;
  float: right;
  /* use the same value inside margin and shape-outside  */
  shape-outside: inset(100px 0 0 0);
  margin-top: 100px;
}

p {
  text-align: justify;
}

<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum
  neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi.
  Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor ac massa tempus
  mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non. Morbi
  urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero.
  Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare.
  Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies
  magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus lectus, sagittis
  rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat
  vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac
  nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor
  in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>

​

Answer 2

通过将图像定位在文本之间，您可以向下移动图像，同时保持图像向右浮动。但是，它相对于周围文本的确切显示位置取决于视口尺寸，即文本如何环绕它。

​

    img {
      position: relative;
      width: 20%;
      height: auto;
      margin: 10px;
    }

    #test {
      float: right;
    }

     <p>&nbsp;&nbsp;&nbsp;&nbsp;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum neque in tempor sollicitudin. <img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png"/>Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo.

Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. 
Aliquam a dolor ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non.

Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur.

Sed semper lacus lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>

​