Satır içi bloğu sarmadan koru, ancak içeriğin sarılmasına izin ver

Şimdiye kadar bu düzeni var:

    
    

    Bir başlangıç ​​olan ul 'i durdurmaktan vazgeçtim. Ancak, 2. li 'deki içerik ekrandan devam eder. Üst öğelerinin üst üste gelmesi vb.

    Boşluğu kapatmak ve ilk li 'den farklı olarak dinamik olmak için 2. li ' ye ihtiyacım var. Ve 2. li içine sarılacak metne ihtiyacım var.

    Herhangi bir yardım için teşekkürler.

    9
    İlk liste öğesinde bir görüntü ve ikincisinde metin var. Bu yüzden sadece 2. liste eşya sarma konusunda endişeliyim.
    katma yazar HGPB, kaynak
    İlk liste öğesi için yalnızca sarmayı devre dışı bırakmanız mı gerekiyor? Bunun için liste konteynerini değil, bunun için beyaz boşluk: nowrap; ayarlayabilirdiniz.
    katma yazar unclenorton, kaynak

    3 cevap

    li {display: table;} arkadaşın.

    Not; Satır içi stilleri kaldırmayı unutmayın!

    9
    katma

    li öğelerinde beyaz boşluk: normal deneyin.

    white-space is inherited by default so they received nowrap from the ul.

    div için daha uygun olabilecek bir düzen için ul kullandığınızı düşünmeye başladım:

    <div class="Item">
     <div class="ImageContainer">/></div> <div class=Text text text text text</div>
    </div>
    
    .Item {
     width: 200px;
     overflow: auto;
    }
    
    .ImageContainer {
     float: left;
     width: 40%;
    }
    
    .TextContainer {
     float: left;
     width: 60%;
    }
    
    5
    katma
    @Bazzz Hayır, bir arka plan resmi değil. Bu bir ön plan görüntüsü. Bir arka plan resmi yapmak doğru görünebilir, ancak bu bir kesmek ve semantik olarak yanlıştır.
    katma yazar ma11hew28, kaynak
    Teşekkürler - sadece sabit bir genişlik eklerseniz, sadece benim için çalışır gibi görünüyor. 2. li'ye genişlik katmak istemiyorum.
    katma yazar HGPB, kaynak
    İlk li bir görüntüyü saklar, ikinci li ise sarılabilir metin tutmalıdır. İkinci li, ekran çözünürlüğüne bağlı olarak büyüyebilir ve küçülebilir.
    katma yazar HGPB, kaynak
    O zaman ne istediğini belirleyebilir misin? Çünkü bir liste yapmak yerine ul mizanpajı için kullanıyor olabileceğinizi düşünmeye başladım. Ve eğer öyleyse belki de bazı yüzer div ler işi daha iyi yapabilir.
    katma yazar Bazzz, kaynak
    Bu bir arka plan görüntüsü ile bir div ve bana sol yastıklama gibi geliyor. Bunu düşünün: <div id = "x"> metin metin metni </div> ve #x {padding-left: 200px; arkaplan resmi: url (myimage.jpg);}
    katma yazar Bazzz, kaynak

    Sanki bir masa kullanmak isteyebilirsin.

    Aksi takdirde, görüntünün genişliğini biliyorsanız, sola kaydırın ve sonraki öğeye, görüntünün genişliğinden büyük veya ona eşit bir sol kenar boşluğu verin.

    Örneğin:

    <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

    article > img {
      float: left;
      height: 80px;
      width: 80px;
    }
    article > div {
      margin-left: 90px;
    }
    
    
    <div>

    Matt Di Pasquale

    I know the width of the image is 80px, so I floated it left and gave the div a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.

    </div>
    </div> </div>
    0
    katma