ブートストラップのドロップダウンメニューのイメージと複数行のテキスト

Question

これはおそらく愚かな質問ですが、なぜそれが機能しないのか分かりません。 私は各項目が左側のイメージで、右側に数行のテキストがあるブートストラップメニューを作成する必要があります。

は、私はこのために、以下のHTMLを書いた：

<div class="btn-group"> 
    <ul class="dropdown-menu" style="display: block;"> 
     <li> 
      <a href="#" class="clearfix"> 
       <div class="pull-left"> 
        <span>My image</span> 
       </div> 
       <div class="pull-left"> 
        <div>Text on the right</div> 
        <div>Second line of text</div> 
       </div> 
      </a> 
     </li> 
    </ul> 
</div> 

リンクはjsfiddleする：https://jsfiddle.net/brucecat5/rr71xmry/

しかし、幅が正しく計算されていないと第二浮かべブロックが最初のブロックの下に移動されます。

なぜそれが起こり、これを解決するために何をすべきか分かりません。

P.S.私はdisplay: table-cellで実装することができますが、私のアプローチがうまくいかない理由を理解できません。

Answer 1

私は問題はドロップダウン・メニュークラスを使用する方法だと思い、これを試してみてください。

<div class="btn-group"> 
<ul style="display: block;"> 
    <li> 
     <a href="#" class="clearfix"> 
      <div class="pull-left"> 
       <img src="smiley.gif" alt="Smiley face" width="42" height="42"> 
      </div> 
      <div class="pull-right"> 
       <p>Text on the right</p> 
       <p>Second line of text</p> 
      </div> 
     </a> 
    </li> 
</ul> 

あなたは、あなたがこのページで例を見ることができるドロップダウン・メニューを使用する場合： https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp

希望します。