javascript - 为什么我的图片没有浮在段落旁边？

Question

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

我做错了什么？

window.onload = function slow() {
  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 = "left";
  tracy1.style.marginLeft = "10px";
  tracy1.className = "fade-img";
  document.getElementsByClassName("img-container")[0]
    .appendChild(tracy1);
  setTimeout(function() {
    tracy1.style.opacity = 1;
  }, 0);
}

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}

header,
nav,
section,
aside,
footer,
article {
  display: block;
}

body {
  background-color: #eae8e9;
}

.container {
  margin: 0px auto;
  background-image: url(back.png);
  background-size: cover;
  width: 1300px;
  padding-top: 10px;
  height: 100%;
}


/* The main Content Section*/


/* TMAC PIC */

.tracy {
  float: left;
  margin-right: 10px;
  margin-left: 10px;
}

.img-container {
  float: left;
  height: 220px;
  position: relative;
}

.fade-img {
  transition: opacity 1s ease-out;
  position: absolute;
  top: 0;
  left: 0;
}


/* Tmac Pic */

.main {
  background-color: #f7f4f4;
  margin-right: 480px;
  margin-left: 20px;
  box-shadow: 10px 10px 10px #1f2963;
  border-radius: 12px;
  padding-bottom: 20px;
  overflow: auto;
}

.tmacLogo {
  position: relative;
  top: 12px;
  left: 10px;
}

hr {
  margin-bottom: 10px;
}

.main h1 {
  text-align: center;
  background-color: white;
  padding-bottom: 10px;
  color: #3f3c3c;
  text-shadow: 2px 3px 2px #ff2b4b;
  font-size: 40px;
  letter-spacing: 2.5px;
}

.main p {
  padding-top: 2px;
  padding-left: 5px;
}

<div class="main">

  <h1 onmouseover="changeStyle()">T-Mac <img src="tmaclogo.png" alt="TmaC" width="55px" height="42px" class="tmacLogo" /></h1>
  <hr style="color:red;">

  <div class="img-container">
    <img src="http://i.imgur.com/eH85WzA.jpg" alt="TmaC" width="175px" height="220px" onclick="slow()" class="tracy fade-img" />
  </div>

  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.</p>

</div>

<li class="thead" onclick="slow()"><a href="#">News</a></li>

View on JSFiddle

这就是我所说的:

Answer 1

您已申请 position: absolute到img ，这会将其从 DOM 中的正常元素流中移除，因此相邻元素将不再受 img 定位的影响.如果您删除该定位，一切都会按预期 float 。 https://jsfiddle.net/y5md2weu/5/