将图像放入div但仍未显示

Question

我的代码

.header {
  background-color: #694e4e;
  height: 95px;
  max-width: 100%;
  max-height: 100%;
}

h1 {
  font-size: 300%;
  position: relative;
  color: white;
  text-align: right;
  font-family: Verdana, Courier, monospace;
  margin-top: 0px;
  padding-top: 10px;
  margin-right: 24px;
}

body {
  margin: 0;
}

.douag {
  margin: auto;
}

<div class="header">
  <h1>hhhh </h1>
  <img src="ss.png" class="douag" />
</div>

问题是ss.png位于页面顶部的标题之外。我想要它。

Answer 1

下面你可以看到图像出现。

.header {
  background-color: #694e4e;
  height: 95px;
  max-width: 100%;
  max-height: 100%;
}

h1 {
  font-size: 300%;
  position: relative;
  color: white;
  text-align: right;
  font-family: Verdana, Courier, monospace;
  margin-top: 0px;
  padding-top: 10px;
  margin-right: 24px;
}

body {
  margin: 0;
}

.douag {
  margin: auto;
}

<div class="header">
  <h1>hhhh </h1>
  <img src="https://bitcoin.org/img/icons/opengraph.png" class="douag" />
</div>

https://jsfiddle.net/t1vn4w1n

Answer 2

这是因为默认情况下你的h1标签是一个块元素。将h1标记设置为：

h1 {    
  display: inline-block;
  float: right;
}

有关示例，请参阅CODEPEN。