我想将图像 float 到某些文本的右侧。看起来图像只有在 html 中的文本之前才能正确 float 。
这有效:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>
<img src="http://placehold.it/100x100"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>
这不起作用:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<img src="http://placehold.it/100x100"/>
</p>
</body>
</html>
这是它在 codepen 上的样子，有足够的文本，以便您可以查看 float 是否正常工作:Example
这是一个问题，因为我编写了一个 js 函数，该函数将图像从向右浮动的缩略图切换为全尺寸图像，并且我希望全尺寸图像位于文本下方，而不是文本上方。
最佳答案
你的浮标正在正常工作。 float 的工作原理是将元素从正常流中取出并按您指定的方向将其定位在容器的边缘。第一个看起来“关闭”的原因是因为您的 img 标签已经位于容器的末尾。 。 。没有其他地方可以真正去。
另一方面，当您将 img 作为段落中的第一个元素时，其 float 属性会更积极地获取该元素并将其移动到容器的另一侧。希望这是有道理的，您可以在这里阅读有关 float 的更多信息 MDN Float
关于html - float 图像可以跟随文字吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43355456/