CSSイメージとDivはインラインには残りません

Question

更新：a JSFFiddleを作成しました。「Bio」と「Reason」の段落が短い限り、完全に動作します。しかし、イメージよりもかなり大きくなると直ちにインラインに行くことを拒否し、次の行に進みます。

2つの段落を含むDIVの横に画像を表示しようとしています。なんらかの理由で、インラインには行かず、理由を理解できません。

これはHTMLです：

<div id="complete_entry"> 
    <a name="poet106"></a> 
    <h1 class="lexpomo" id="poet_list"><a href='#poet106'>Poet Name</a><br /></h1> 
    <p class="lexpomo" id="sign_up_date"> 
     2016-05-29 22:29:56 
    </p> 
    <img src="http://localhost/accents/wp-content/uploads/lexpomo/inkwell.svg" class="lexpomo" id="poet_avatar" /> 
    <div id="poet_list_block"> 
     <p class="lexpomo" id="poet_bio"> 
      <strong>Bio: 
      </strong><br /> 
      Paragraph-length bio. 
     </p> 
     <p class="lexpomo" id="poet_reason"> 
      <strong>Reason for signing up: </strong><br /> 
      Paragraph-length reason. 
     </p> 
    </div> 
</div> 

これは、CSSです：

.complete_entry { 
    display: block; 
    clear: both; 
} 

#sign_up_date { 
    font-style: italic; 
    font-size: 10pt; 
} 

#poet_bio, #poet_reason { 
    margin-left: 10px; 
    display: block; 
    clear: both; 
} 

h1#poet_list, 
h1#poet_list a{ 
    margin: 30px 0 0 0; 
    padding: 0; 
    line-height: normal; 
    font-weight: bold; 
} 

img.lexpomo#poet_avatar { 
    width: 100px; 
    max-height: 200px; 
    min-height: 50px; 
    display: inline; 
    clear: left; 
    float: left; 
    background-color: black; 
} 

#poet_list_block { 
    display: inline; 
    float: left; 
    clear: none; 
} 

私はワードプレスでこれを実行しているんだけど、私はそれがこの質問のために重要でなければならないとは思いません。

ありがとうございます！これが起こっている

Answer 1

理由がそこにあなたのpoet_list_blockに指定されていません幅がありません、そして、あなたのp要素が行全体を満たすのに十分なテキストが含まれているため、p要素はブロック全体の幅を定義し、それを100％にするということです。これは、現在の行にブロックのための余地がないことを意味し、これが次の行にドロップする理由です。

あなたの質問から、2つの段落を次の行に置くか、独立して浮かべるのではなく、イメージの右側にある単一の正方形にしたいと思うようです。これを行う最も簡単な方法は、浮動小数点数の代わりにCSS tableスタイリングを使用することです。結果の

スクリーンショット：

ワーキングライブデモ：

#sign_up_date { 
 
    font-style: italic; 
 
    font-size: 10pt; 
 
} 
 

 
#poet_bio, #poet_reason { 
 
    margin-left: 10px; 
 
    margin-top: 0; 
 
} 
 

 
h1#poet_list, 
 
h1#poet_list a{ 
 
    margin: 30px 0 0 0; 
 
    padding: 0; 
 
    line-height: normal; 
 
    font-weight: bold; 
 
} 
 

 
img.lexpomo#poet_avatar { 
 
    width: 100px; 
 
    height: 100px; 
 
    max-height: 200px; 
 
    min-height: 50px; 
 
    background-color: black; 
 
} 
 

 
.bio_container { 
 
    display: table; 
 
} 
 

 
.bio_container > * { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
}

<div id="complete_entry"> 
 
    <a name="poet106"></a> 
 
    <h1 class="lexpomo" id="poet_list"><a href='#poet106'>Poet Name</a><br /></h1> 
 
    <p class="lexpomo" id="sign_up_date"> 
 
     2016-05-29 22:29:56 
 
    </p> 
 
    <div class="bio_container"> 
 
    
 
    <img src="http://localhost/accents/wp-content/uploads/lexpomo/inkwell.svg" class="lexpomo" id="poet_avatar" /> 
 
    <div id="poet_list_block"> 
 
     <p class="lexpomo" id="poet_bio"> 
 
      <strong>Bio: 
 
      </strong><br /> 
 
      Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. 
 
     </p> 
 
     <p class="lexpomo" id="poet_reason"> 
 
      <strong>Reason for signing up: </strong><br /> 
 
      Paragraph-length reason. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

JSFiddleバージョン：https://jsfiddle.net/6upL7gzc/