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

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

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

.img-container {
  width: 220px;
}

我创建了一个更新的 fiddle 来展示这个 here。

希望对您有所帮助！

Answer 2

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

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

Why isnt my image floating up next to the paragraph?

html

javascript

css

css-float