イメージは親div内のテキストとインラインで表示されません

Question

テキストとロゴを含む親divがあります。これらの2つの要素は、同じ行のそれぞれの隣に現れるはずです。

イメージと親コンテナの両方を表示するコードを追加し、親要素がイメージを格納するのに十分な大きさであることを確認してコードを追加しても、テキストの下にイメージが崩壊しています。

HTML：

<div class="heading"><h1>Stanford Connection</h1><img src="tree-logo.gif" alt="Stanford Logo" id="logo"/></div> 

CSS：

.heading { 
width: 800px; 
background-color: #9A0000; 
color: white; 
font-size: 20pt; 
float: left; 
overflow: hidden; 
display: inline-block; 
} 

#logo { 
float:left; 
display: inline-block; 
} 

Answer 1

問題は、あなたが本当に左に両方要素を浮かべていないことです。 .headingと#logoを左に浮かべましたが、浮動要素はの兄弟です。したがって、.headingは任意の兄弟要素の左に浮動し、h1はfloatにまったく設定されません。どこ正確に応じて、あなたは画像が座ってしたいこと

.heading { 
 
    width: 800px; 
 
    background-color: #9A0000; 
 
    color: white; 
 
    font-size: 20pt; 
 
    float: left; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 

 
h1, #logo { 
 
    float: left; 
 
}

<div class="heading"> 
 
    <h1>Stanford Connection</h1><img src="http://placehold.it/100" alt="Stanford Logo" id="logo" /></div>

注：あなたのイメージを整列する

、あなたがする必要があるすべては、同様に左へh1フロートです、display: inline-blockが適しています。

希望すると便利です。 :)