Запобігання вставки вбудованого блоку, але дозволити вміст обернути

До цих пір я маю такий макет:

    
    

    Я зумів зупинити ul з обгортки, що є початком. Однак вміст у другому li продовжує відключати екран. Перекриття його батьківських елементів тощо.

    Мені потрібен другий li , щоб зайняти слабку позицію і бути динамічним у ширину, на відміну від першого li . І мені потрібен текст для обгортання всередині 2-го li .

    Дякую за будь-яку допомогу.

    9
    У першому елементі списку та у другому - це зображення. Тому я лише стурбований обгорткою 2-го списку.
    додано Автор HGPB, джерело
    Вам потрібно лише відключити обгортку для першого елемента списку? Ви можете просто встановити white-space: nowrap; для нього, а не контейнер списку в цілому.
    додано Автор unclenorton, джерело

    3 Відповіді

    li {display: table;} - це ваш друг.

    р.с. Не забудьте видалити вбудовані стилі!

    9
    додано

    Спробуйте white-space: normal на елементах li .

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

    Я починаю думати, що ви використовуєте ul для цілей макета, які, можливо, краще підходять для div :

    <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
    додано
    @Bazzz Ні, це не фонове зображення. Це зображення на передньому плані. Зображення фонового зображення може виявитися правильним, але це зламане і семантично неправильне.
    додано Автор ma11hew28, джерело
    Спасибі - мені здається, що це працює тільки для мене, якщо я додаю фіксовану ширину. Я дійсно не хочу додавати ширину до другого лі.
    додано Автор HGPB, джерело
    Спочатку li зберігає зображення, другий li повинен мати обтічний текст. Друга лі може зростати і зменшуватися залежно від роздільної здатності екрана.
    додано Автор HGPB, джерело
    Чи можете ви конкретизувати те, що ви хочете потім? Оскільки я починаю думати, що ви можете використовувати ul для цілей макета, а не створювати список. І якщо так, то, можливо, деякі плаваючі div s можуть зробити роботу кращою.
    додано Автор Bazzz, джерело
    Це звучить як розділ з фоновим зображенням і залишив заповнення для мене. Розглянемо це: <div id = "x"> текстовий текстовий текст </div> і #x {padding-left: 200px; фонове зображення: url (myimage.jpg);}
    додано Автор Bazzz, джерело

    Схоже, ви, напевно, хочете використовувати таблицю.

    В іншому випадку, якщо ви знаєте ширину зображення, плавайте зліва і надайте наступному елементу лівий край більше або дорівнює ширині зображення.

    Наприклад:

    <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
    додано