html - h1タグと画像タグを1行に並べて並べるには？

Question

画像と h1 タグを 1 行に並べようとすると問題が発生します。display: inline と inline-block を試してみましたが、機能せず、2 つのコンテナーのみを作成しました。セクションの幅を 100% に追加しましたが、まだ何もありません。フロートも機能しません。機能した場合、ページの配置が台無しになります。私は何を間違っていますか？ここで私の完全なソース コードを確認してください: http://jsfiddle.net/TheAmazingKnight/bkmyv/

HTML

<section>
    <img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
    <h1>FOLLOW ME ON...</h1>
</section>

CSS

section{
display:inline-block;
width:100%;
}
h1{
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
display:inline-block;
}

Answer 1

私はフィドルに追加float:left;しました#mefloat:right;h1

#me{
  width: 600px;
  height: 400px;
  display: block;
  margin: 10px 10px;
  float: left;
}
h1{
  display:inline-block;
  font-weight:bold;
  font-size:40px;
  color:#FFFFFF;
  background-color:#FFB405;
  float: right;
  margin: 10px;
}

Answer 2

セクション内の img に float: left を指定するだけです。