把图像转换成一个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。