画像の下でのテキストの折り返しを停止するCSS

私は次のマークアップを持っています：

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

テキストが折り返されても、画像の「列」に入らないようにする必要があります。私はtable（私がやっていた）でそれを行うことができることを知っていますが、これはこの理由で実行できません。

私は成功せずに以下を試しました：

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

私も試しましたfloat: right。

ありがとう。

編集：私はそれをこのように見せたい：

IMG   Text starts here and keeps going... and
      wrap starts here.

このようではありません：

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

この質問は多くの意見を集めており、これは受け入れられた答えだったので、次の免責事項を追加する必要があると感じました。

この回答は、OPの質問（例で設定された幅を持っていた）に固有のものでした。それが機能している間、それはあなたが要素、画像と段落のそれぞれに幅を持っていることを要求します。それがあなたの要件でない限り、私はこの質問に対する別の答えとして投稿されているジョー・コンリンの解決策を使用することをお勧めします。

ザ・ span要素は、インライン要素である、あなたはCSSでその幅を変更することはできません。

次のCSSをスパンに追加して、幅を変更できるようにすることができます。

display: block;

通常はより理にかなっている別の方法は、<p>要素をの親として使用すること<span>です。

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

以来<p>ですblock要素な何も変更せずにCSSを使用して幅を設定できます。

ただし、どちらの場合も、ブロック要素があるため、テキストがすべて画像の下に表示されないように、画像をフロートさせる必要があります。

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PSは、代わりのfloat:left画像に、あなたも置くことができるfloat:rightのli pが、その場合、あなたはまた、必要となるtext-align:leftテキストを正確に再調整します。

PSS<p>要素を追加しないという最初の解決策を進めた場合、CSSは次のようになります。

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

多くの人を捕らえているように見えるこの問題に対する非常に簡単な答え：

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

例を参照してください：http：//jsfiddle.net/vandigroup/upKGe/132/

背景情報が必要な人のために、なぜ機能するのかを説明する短い記事がありoverflow: hiddenます。これは、いわゆるブロックフォーマットコンテキストと関係があります。これはW3Cの仕様の一部であり（つまり、ハックではありません）、基本的にはブロックタイプのフローを持つ要素が占める領域です。

適用されるたびにoverflow: hidden、新しいブロックフォーマットコンテキストが作成されます。しかし、その動作をトリガーできるのはそれだけではありません。Sydney Web AppsGroupのFionaChanによるプレゼンテーションの引用：

• フロート：左/右
• オーバーフロー：非表示/自動/スクロール
• 表示：テーブルセルおよびテーブル関連の値/インラインブロック
• 位置：絶対/固定

あなたがしたい場合margin-leftに動作するようにspan要素あなたはそれをする必要がありますdisplay: inline-blockかdisplay:blockにも。

display:flexテキストの設定は私のために働いた。

画像とスパンの周りにdivをラップし、次のようにCSSに以下を追加します。

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

もっと少なく

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }