问题描述
我正在制作一个包含一些文本的页面，但我想在文本右侧插入一个图像。我设法使文本环绕图像，但似乎除了文本的左右两侧之外，我无法移动图像。我想垂直移动图像。
这是我的图像代码：
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> 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>有人可以帮我吗？
解决方法
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>您可以将图像向下移动，同时保持其向右浮动，方法是将其放置在文本中。但是，它相对于周围文本的确切显示位置取决于视口尺寸，即文本如何将其四舍五入。
img {
position: relative;
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
} <p>
Lorem ipsum dolor sit amet,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,porttitor semper nulla. Pellentesque varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit,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,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,eget rhoncus risus finibus ornare. Vestibulum in velit rutrum,varius eros. Sed id volutpat diam. Sed at massa erat.
Lorem ipsum dolor sit amet,ultricies magna at,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,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,maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis,sagittis eu tempor in,tincidunt mauris.
</p>