Question

我对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; ，但我无法弄清楚如何使用它或它有“浮动”的一些问题。 Coud有人请帮帮我怎么办？
提前致谢，感谢所有到目前为止一直试图解决的人......

Answer 1

根据需要更改顶部的值

＆＃13;

#img{
  position: relative;
  top:-10px;
  }

＆＃13;

<img src="https://i.stack.imgur.com/W1bSf.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" id="img">

＆＃13;

Answer 2

这个根本问题（图像与<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>

但是，您可能希望将clear: both添加到<hr>：

，而不是试图将浮动向上移动。

#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>

Answer 3

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

边距：5px的; 会很好的或者您可以根据需要更改值

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

如何在html / css中向上移动图像

3 个答案: