Javascript 为什么我的图像没有浮在段落旁边？

我以一幅图像为例，因为我已经找到了如何使其过渡并淡入下一幅图像（不确定为什么它不使用这些图像）。然而，当我在文本编辑器中运行代码时，图像确实发生了变化，但我的图像没有变化，容器漂浮在顶部而不是旁边，在我创建转换后的图像之前，它漂浮在图像的一侧（但仍然没有完全环绕图像）

我做错了什么

window.onload=函数慢（）{
document.getElementsByClassName（“tracy”）[0]
.style.opacity=0；
var tracy1=document.createElement（“img”）；
tracy1.src=”http://i.imgur.com/1yiEfva.jpg";
tracy1.style.width=“175px”；
tracy1.style.height=“220px”；
tracy1.style.opacity=0；
tracy1.style.float=“左”；
tracy1.style.marginLeft=“10px”；
tracy1.className=“淡入淡出img”；
document.getElementsByClassName（“img容器”）[0]
.儿童（tracy1）；
setTimeout（函数（）{
tracy1.style.opacity=1；
}, 0);
}

*{
保证金：0；
填充：0；
列表样式类型：无；
文字装饰：无；
}
标题，
导航，
第节，
在一边
页脚，
文章{
显示：块；
}
身体{
背景色：#eae8e9；
}
.集装箱{
保证金：0px自动；
背景图片：url（back.png）；
背景尺寸：封面；
宽度：1300px；
填充顶部：10px；
身高：100%；
}
/*主要内容部分*/
/*麦迪公司*/
特蕾西先生{
浮动：左；
右边距：10px；
左边距：10px；
}
.img集装箱{
浮动：左；
高度：220px；
位置：相对位置；
}
.淡入淡出{
过渡：不透明度1s缓解；
位置：绝对位置；
排名：0；
左：0；
}
/*麦迪公司*/
梅因先生{
背景色：#F7F4；
右边距：480px；
左边距：20px；
盒影：10px 10px 10px#1f2963；
边界半径：12px；
垫底：20px；
溢出：自动；
}
特马克罗戈先生{
位置：相对位置；
顶部：12px；
左：10px；
}
人力资源{
边缘底部：10px；
}
.main h1{
文本对齐：居中；
背景色：白色；
垫底：10px；
颜色：#3f3c3c；
文本阴影：2px 3px 2px#ff2b4b；
字体大小：40px；
字母间距：2.5px；
}
.main p{
垫顶：2件；
左侧填充：5px；
}

麦迪

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
像Aldus PageMaker这样的出版软件，包括Lorem Ipsum版本。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又随着像Aldus PageMaker这样的桌面出版软件而流行
包括Lorem Ipsum的版本

问题在于，您不是将图像浮动在文本旁边，而是一个容纳图像的

DIV

容器。div是块级元素，这意味着默认情况下它们占据100%的宽度。要解决此问题并正确浮动图像，您需要将其从div中取出并直接浮动图像，或者为容器添加一个宽度：

.img-container {
  width: 220px;
}

我已经创建了一个更新的小提琴来展示这一点

---

希望这有帮助

您已将

position:absolute

应用于

img

，这会将其从DOM中的正常元素流中移除，因此相邻元素将不再受

img

定位的影响。如果删除该定位，则所有内容都将按预期浮动

你指的是我没有漂浮的什么形象？因为我浮动了我创建的图像，容器和html中的图像？？昆汀·塔伦蒂诺的图像。您在图像上使用了

position:absolute

，并将图像放置在名为

.img container

的包装中。

img容器

是浮动的，而不是图像本身。但是，如果图像本身是浮动的，它需要与文本位于同一父对象中，因此它需要直接位于

.main

下……是的，所以现在当我这样做并移除绝对定位时……所有内容都浮动良好，然而，我在JS中创建的图像显示在图像旁边，而不是混合。所以，是的，我再次将宽度应用于该容器，但现在，我通过javaScript创建的图像漂浮在@obsidian下面，而不是混合并替换旧图像…就好像我放弃了一个图像，而不是另一个图像一样。我没有看到第二个图像被替换完全消失了。你能发布一个新的JSFIDLE来说明这个问题吗？我之所以应用绝对定位是因为我想让我在javascript中创建的图像显示在它的位置上，就好像它在。。。当我在我的文本编辑器中运行它时，它就可以工作了，所以我不知道为什么它不在这里……但是，是的，这就是我将它应用于@michaelyep类的主要原因，所以当我在我的文本编辑器中尝试它时，我在JavaScript中创建的图像会浮在它旁边，而不是混入其中。@CheckLife抱歉有一点过时了。明白了，你只需要稍微修改一下布局。这是你想要的吗？不，我希望图像淡出和我创建的javascript的新图像融合在一起…我在我的初始问题中放了一个截图不完全…我不希望那里看起来像是空白的，哪怕是一秒钟…我可以给你发电子邮件截图吗？我放了一个，但我不确定你是否看到了…但是，是的，这基本上是一个概念，当我从我的文本编辑器中运行它时，它实际上是混合的，没有你能够看到灰色的画布。