gpt4 book ai didi

html - float 图像可以跟随文本吗?

转载 作者:行者123 更新时间:2023-11-27 23:15:35 24 4
gpt4 key购买 nike

我想将图像 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com