是否可以将图像放在 html 中的 <hr> 标记上方？ [复制]答案

【问题标题】：Is it possible to put an image above the <hr> tag in html? [duplicate]是否可以将图像放在 html 中的 <hr> 标记上方？ [复制]
【发布时间】：2019-06-17 20:01:12
【问题描述】：

我对 HTML 中的图像有疑问。是否可以在<hr> 标签上方添加图像？因为我想在我的代码中实现的是在创建的<hr> 上方有一个图像。有人能回答我这是否可能吗？

我希望它看起来像这样：

这可能吗？或者也许有人可以给出可能的解决方案？

【问题讨论】：

请添加代码 sn-p。谢谢
是的，这是可能的。但是您尝试过什么来解决这个问题？你有什么问题？显示一个最小的、完整的代码 sn-p 来说明你的问题。
是的，您可以查看 (stackoverflow.com/questions/32499132/hr-tag-as-an-image/…) 它已经解释过了。
请向我们展示您的代码...

标签： jquery html css

【解决方案1】：

您可以使用display:flex 而不是使用hr 使用border-bottom 包装div 也可以添加justify-content: space-between; 将图像设置在包装div 的末尾（右侧）

body,html{
width:100%;
margin: 0;
}
.header{
    display: flex;
    width: calc(100% - 30px);
    justify-content: space-between;
    border-bottom: 1px solid grey;
    margin: 15px;
}
img{
width:100px;
height:50px;
}

<div class="header">
  <div class="left">인사말</div>
  <div class="right">
    <img src="https://i.stack.imgur.com/3mG2d.jpg"/>
  </div>
</div>

화이팅!!

【讨论】：

【解决方案2】：

试试这个我认为它对你有用的。

img {
  height: 100px;
  width: 100px;
}
.block {
  display: flex;
  justify-content: space-between;
}
.text-left {
    padding: 35px 0;
}
.bg-section {
  background: gray;
  width: 100%;
  height: auto;
  padding: 100px;
  margin-top: 20px;
}

<div class="container">
  <div class="block">
    <span class="text-left">인사말</span>
  <img src="https://i.ibb.co/SK1J1fR/tire.png" alt="img" class="img-right">
  </div>
  <hr>
  <section class="bg-section"></section>
</div>

【讨论】：