CSS untuk menghentikan pembungkusan teks di bawah gambar

Saya memiliki markup berikut:

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

Saya ingin agar jika teksnya membungkus, itu tidak masuk ke 'kolom' untuk gambar. Saya tahu saya bisa melakukannya dengan table(yang saya lakukan) tetapi ini tidak bisa diterapkan karena alasan ini .

Saya telah mencoba yang berikut ini namun tidak berhasil:

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

Saya juga mencoba float: right.

Terima kasih.

EDIT: Saya ingin terlihat seperti ini:

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

Tidak seperti ini:

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

Karena pertanyaan ini mendapatkan banyak pandangan dan ini adalah jawaban yang diterima, saya merasa perlu menambahkan penafian berikut:

Jawaban ini khusus untuk pertanyaan OP (Yang memiliki set lebar dalam contoh). Meskipun berhasil, Anda harus memiliki lebar pada setiap elemen, gambar, dan paragraf. Kecuali itu kebutuhan Anda, saya sarankan menggunakan solusi Joe Conlin yang diposting sebagai jawaban lain untuk pertanyaan ini.

The spanelemen elemen inline, Anda tidak dapat mengubah lebar dalam CSS.

Anda dapat menambahkan CSS berikut ke span Anda sehingga Anda dapat mengubah lebarnya.

display: block;

Cara lain, yang biasanya lebih masuk akal, adalah menggunakan <p>elemen sebagai induk untuk Anda <span>.

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

Karena <p>merupakan blockelemen, Anda dapat mengatur lebarnya menggunakan CSS, tanpa harus mengubah apa pun.

Namun dalam kedua kasus tersebut, karena Anda memiliki elemen blok sekarang, Anda perlu mengapung gambar sehingga teks Anda tidak semuanya berada di bawah gambar Anda.

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

PS Alih-alih float:leftpada gambar, Anda bisa juga menempatkan float:rightpada li ptetapi dalam kasus itu, Anda juga akan perlu text-align:leftuntuk meluruskan kembali teks dengan benar.

PSS Jika Anda melanjutkan dengan solusi pertama dengan tidak menambahkan <p>elemen, CSS Anda akan terlihat seperti ini:

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

Jawaban yang sangat sederhana untuk masalah ini yang tampaknya menarik perhatian banyak orang:

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

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

Lihat contoh: http://jsfiddle.net/vandigroup/upKGe/132/

Bagi mereka yang menginginkan info latar belakang, berikut adalah artikel singkat yang menjelaskan mengapa overflow: hiddenberhasil. Ini ada hubungannya dengan apa yang disebut konteks pemformatan blok . Ini adalah bagian dari spesifikasi W3C (yaitu bukan hack) dan pada dasarnya adalah wilayah yang ditempati oleh elemen dengan aliran tipe blok.

Setiap kali diterapkan, overflow: hiddenmembuat konteks pemformatan blok baru . Tapi itu bukan satu-satunya properti yang mampu memicu perilaku itu. Mengutip presentasi oleh Fiona Chan dari Sydney Web Apps Group:

• float: kiri / kanan
• overflow: tersembunyi / otomatis / gulir
• display: sel-tabel dan nilai / blok-sebaris apa pun yang terkait dengan tabel
• posisi: mutlak / tetap

Jika Anda ingin margin-leftmengerjakan spanelemen, Anda harus membuatnya display: inline-blockatau display:blockjuga.

pengaturan display:flexuntuk teks berhasil untuk saya.

Bungkus div di sekitar gambar dan span dan tambahkan yang berikut ke CSS seperti ini:

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%;
            }

KURANG

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

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