logo标签列表

如何在HTML/CSS中将图像向上移动

htmlcss
5


我对HTML并不熟悉，但是我想在我的页面上添加一张图片，但是当我使用<hr>将其与其他内容分隔开来时，它们会相互交叉。因此，我想将我的图片向上移动一点。以下是我一直在使用的代码：

<html dir="rtl"> <body> ... <img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" ... </div> </body> </html>

我没有使用<head>或<style>标签。 我一直在尝试使用position:relative;top:-10px;，但是我无法弄清楚如何使用它，或者它与“float”有问题。 请问有人可以帮我解决这个问题吗？
非常感谢您的帮助和之前为此而努力解决的所有人...

仅凭一行代码可能很难给出答案。也许您可以使用https://jsfiddle.net/创建一个更好的问题示例？ - DataSwede
请提供您的完整代码 - jafarbtech
3个回答
3

根据您的需要更改 top 的值。

#img{
  position: relative;
  top:-10px;
  }
<img src="https://istack.dev59.com/W1bSf.webp" alt="my pic" style= "width: 108px; height: 130px; float:left;" id="img">

1
这个根本问题（即图片和<hr>相互交叉）听起来像是一个清除浮动问题。
当你有一个浮动元素时，它可能会与非浮动元素“重叠”： 

#float {
  width: 100px;
  height: 100px;
  background: red;
  float: right;
}

hr {
  border: 4px solid blue;
}
<div id="float"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p>
<hr>

但是，你不应该只是试图将浮动元素上移，而是应该在你的 <hr> 元素中添加 clear: both：

#float {
  width: 100px;
  height: 100px;
  background: red;
  float: right;
}

hr {
  border: 4px solid blue;
  clear: both;
}
<div id="float"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p>
<hr>

0
<img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;margin-bottom:5px">

margin-bottom:5px;将正常工作，或者您可以根据需要更改值

或提供演示代码以获得更好的视图

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接