为什么我的图像不会在段落旁边浮动？

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中的正常元素流中移除，因此相邻元素将不再受{{{}的定位影响1}}。如果删除该定位，则所有内容都会按预期浮动。 https://jsfiddle.net/y5md2weu/5/

Answer 2

问题是您没有在文本旁边浮动图片，而是放置图片的DIV容器。 DIV是block-level元素，这意味着它们默认占用100％的宽度。要解决这个问题，并正确浮动图像，您需要将其从div中取出并直接浮动图像，或者向容器添加宽度：

.img-container {
  width: 220px;
}

我创建了一个更新的小提琴，展示了这个here。

希望这有帮助！