javascript - 为什么我的图像没有 float 在段落旁边?

标签 javascript css html css-float

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

我做错了什么?

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

这就是我所说的:

enter image description here

最佳答案

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

关于javascript - 为什么我的图像没有 float 在段落旁边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42989834/

相关文章:

javascript 解析字符串并使用条件逻辑进行检查

css - 调整仪表元素的CSS而不破坏

javascript - CSS3 Flex 布局右侧留空

html - 如何在两行多个 div 之间添加间距

javascript - Html5 原生日期选择器,有变化

javascript - Zebra 日期选择器图标未显示

javascript - 用于增加文本框中日期的按钮

javascript - Codecademy JavaScript Push() 练习

javascript - 如何在 jQuery 中插入打开的 div?

javascript - 搜索单词并为其着色