把圖像轉換成一個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。