CSS, aby zatrzymać zawijanie tekstu pod obrazem

Mam następujące znaczniki:

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

Chcę, aby tekst zawijał się, nie trafiał do „kolumny” obrazu. Wiem, że mogę to zrobić za pomocą table(co robiłem), ale z tego powodu nie jest to wykonalne .

Próbowałem następujących bez powodzenia:

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

Ja też próbowałem float: right.

Dzięki.

EDYCJA: chcę, żeby wyglądało to tak:

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

Nie tak jak to:

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

Ponieważ to pytanie zyskuje wiele opinii i była to akceptowana odpowiedź, poczułem potrzebę dodania następującego zastrzeżenia:

Ta odpowiedź była specyficzna dla pytania PO (które miało szerokość określoną w przykładach). Chociaż to działa, wymaga szerokości każdego elementu, obrazu i akapitu. O ile nie jest to Twoje wymaganie, polecam skorzystanie z rozwiązania Joe Conlin, które jest zamieszczone jako kolejna odpowiedź na to pytanie.

Plik spanElement jest elementem inline, nie można zmienić jego szerokość w CSS.

Możesz dodać następujący CSS do swojego zakresu, abyś mógł zmienić jego szerokość.

display: block;

Innym sposobem, który zwykle ma większy sens, jest użycie <p>elementu jako rodzica dla twojego <span>.

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

Ponieważ <p>jestblock elementem, możesz ustawić jego szerokość za pomocą CSS, bez konieczności zmiany czegokolwiek.

Ale w obu przypadkach, ponieważ masz teraz element blokowy, będziesz musiał przesunąć obraz tak, aby cały tekst nie znalazł się pod obrazem.

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

PS Zamiast float:leftna obrazie, można również umieścić float:rightna li pale w takim przypadku konieczne będzie także text-align:leftprawidłowo wyrównać tekst.

PSS Jeśli zdecydowałeś się na pierwsze rozwiązanie polegające na nie dodawaniu <p>elementu, twój CSS powinien wyglądać tak:

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

Bardzo prosta odpowiedź na ten problem, który wydaje się łapać wiele osób:

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

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

Zobacz przykład: http://jsfiddle.net/vandigroup/upKGe/132/

Dla tych, którzy chcą uzyskać dodatkowe informacje, oto krótki artykuł wyjaśniający, dlaczego overflow: hiddendziała. Ma to związek z tak zwanym kontekstem formatowania bloków . Jest to część specyfikacji W3C (tj. Nie jest to hack) i jest to w zasadzie obszar zajmowany przez element z przepływem typu blokowego.

Za każdym razem, gdy jest stosowany, overflow: hiddentworzy nowy kontekst formatowania bloku. Ale to nie jedyna właściwość, która może wywołać takie zachowanie. Cytując prezentację Fiony Chan z Sydney Web Apps Group:

• float: lewo / prawo
• przepełnienie: ukryte / automatyczne / przewijanie
• display: tabela-komórka i wszelkie wartości związane z tabelą / inline-block
• pozycja: bezwzględna / stała

Jeśli chcesz, margin-leftaby działał nad spanelementem, musisz to zrobić display: inline-blocklub display:blockteż.

ustawienie display:flextekstu zadziałało dla mnie.

Owiń element DIV wokół obrazu i zakresu i dodaj do CSS w ten sposób:

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

MNIEJ

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

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