Görselin altına metin kaydırmayı durdurmak için CSS

Aşağıdaki işaretlemem var:

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

Metnin kaydırılması durumunda resmin "sütununa" gitmemesini istiyorum. Bunu a ile yapabileceğimi biliyorum table(bunu yapıyordum) ama bu nedenle bu işe yaramıyor .

Aşağıdakileri başarılı olmadan denedim:

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

Ben de denedim float: right.

Teşekkürler.

DÜZENLEME: Bunun gibi görünmesini istiyorum:

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

Böyle değil:

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

Bu soru çok sayıda görüş kazandığından ve kabul edilen cevap bu olduğundan, aşağıdaki sorumluluk reddini ekleme ihtiyacı hissettim:

Bu cevap OP'nin sorusuna özeldi (Örneklerde genişliği ayarlanmış olan). Çalışırken, öğelerin her birinde, görüntüde ve paragrafta bir genişliğe sahip olmanızı gerektirir. Gereksiniminiz bu değilse , bu soruya başka bir cevap olarak yayınlanan Joe Conlin çözümünü kullanmanızı tavsiye ederim .

spanEleman bir satır içi eleman, CSS onun genişliğini değiştiremezsiniz olduğunu.

Genişliğini değiştirebilmeniz için aşağıdaki CSS'yi yayılma alanınıza ekleyebilirsiniz.

display: block;

Genellikle daha mantıklı olan başka bir yol da, bir <p>öğeyi sizin için ebeveyn olarak kullanmaktır <span>.

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

Yana <p>bir olan blockunsur, bir şey değiştirmek zorunda kalmadan, CSS kullanarak genişliğini ayarlayabilirsiniz.

Ancak her iki durumda da, şimdi bir blok öğeniz olduğundan, metninizin tamamı görüntünüzün altına düşmemesi için görüntüyü kaydırmanız gerekecektir.

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

Not: float:leftResmin float:rightüzerine koymak yerine , onu da takabilirsiniz , li pancak bu durumda, text-align:leftmetni doğru şekilde yeniden hizalamanız da gerekecektir .

PSS Eğer bir <p>element eklememenin ilk çözümüne geçtiyseniz, CSS'niz şöyle görünmelidir:

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

Pek çok insanı yakalayan bu problem için çok basit cevap:

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

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

Örneğe bakın: http://jsfiddle.net/vandigroup/upKGe/132/

Arka plan bilgisi isteyenler için, neden işe yaradığını açıklayan kısa bir makaleoverflow: hidden . Sözde blok biçimlendirme bağlamı ile ilgisi vardır . Bu, W3C'nin spesifikasyonunun bir parçasıdır (yani bir hack değildir) ve temelde blok tipi akışa sahip bir eleman tarafından işgal edilen bölgedir.

Uygulandığı her zaman, overflow: hiddenbir oluşturur yeni blok biçimlendirme bağlamı. Ancak bu davranışı tetikleyebilecek tek özellik bu değildir. Sydney Web Apps Group'tan Fiona Chan'ın bir sunumundan alıntı yapmak :

• şamandıra: sol / sağ
• taşma: gizli / otomatik / kaydırma
• ekran: tablo hücresi ve tabloyla ilgili değerler / satır içi blok
• pozisyon: mutlak / sabit

margin-leftBir spanöğe üzerinde çalışmayı istiyorsanız, onu yapmanız display: inline-blockya display:blockda yapmanız gerekir .

display:flexmetin için ayar benim için çalıştı.

Görüntünün ve aralığın etrafına bir div sarın ve aşağıdaki gibi CSS'ye ekleyin:

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

AZ

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

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