Ограничение ширины текста в списке без ужатия изображений
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 04.02.19 12:11
Оценка:
В HTML есть списки, пункты которых (li) содержат текст и изображения (блоками, по вертикали), в том числе достаточно широкие. Чтобы изображения не вылезали за ширину области видимости, для элементов img задано "max-width: 100%". В узких окнах все хорошо, но в широких строки текста становятся слишком длинными. Если же задать максимальную ширину для пункта списка (li), то она наследуется и вложенными в пункт изображениями — они ужимаются по ширине до границы текста.

Можно обойти это оборачиванием текста в каждом пункте в p/span, задавая максимальную ширину только для них, но оборачивать придется вручную в каждом пункте, плюс в WYSIWYG-редакторе неудобно постоянно следить за тем, чтобы обертка не пропала.

Если закрывать список, вставлять изображения, затем открывать его снова — съезжает автоматическая нумерация пунктов, придется опять же поддерживать ее вручную.

Есть ли возможность ограничить ширину текстового блока иначе, как шириной его контейнера? Ну, или как-то предотвратить ограничение ширины изображений в таком блоке. С абсолютным позиционированием, боюсь, выйдет совсем коряво.
текст изображения ширина максимальная ограничить max-width список li
Re: Ограничение ширины текста в списке без ужатия изображени
От: rFLY  
Дата: 22.02.19 13:56
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Есть ли возможность ограничить ширину текстового блока иначе, как шириной его контейнера? Ну, или как-то предотвратить ограничение ширины изображений в таком блоке. С абсолютным позиционированием, боюсь, выйдет совсем коряво.

Не знаю актуально ли еще, но приведи пример. В твоем предыдущем сообщении я заметил, что ты не всем родителям проставляешь 100% ширину. Те етсь, в струтуре
<html style="width:100%>
<body/><-- тут не проставлено 100%
<div style="width:100%>
<img style="width:100%>
<закрывающие тэкги>

не должно быть не заданного размера в родителях вплоть до <html> или хотябы до первого статического (непроцентного) width
Отредактировано 22.02.2019 14:00 rFLY . Предыдущая версия .
Re[2]: Ограничение ширины текста в списке без ужатия изображени
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 22.02.19 18:51
Оценка:
Здравствуйте, rFLY, Вы писали:

FLY>Не знаю актуально ли еще, но приведи пример.


Актуально. Вот пример.

FLY>В твоем предыдущем сообщении я заметил, что ты не всем родителям проставляешь 100% ширину.


Этого и не требуется. Если я убираю ограничение ширины для <p>, <li> и прочих — изображения перестают сжиматься, но вместе с ними расползается и текст.
Re[3]: Ограничение ширины текста в списке без ужатия изображ
От: rFLY  
Дата: 22.02.19 19:51
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Этого и не требуется. Если я убираю ограничение ширины для <p>, <li> и прочих — изображения перестают сжиматься, но вместе с ними расползается и текст.


А почему не сделать для li {width:20cm}, а для li img {max-width:120%}?
Отредактировано 22.02.2019 19:53 rFLY . Предыдущая версия .
Re[4]: Ограничение ширины текста в списке без ужатия изображ
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 22.02.19 20:12
Оценка:
Здравствуйте, rFLY, Вы писали:

FLY>А почему не сделать для li {width:20cm}, а для li img {max-width:120%}?


В таком случае изображения перестают сжиматься в окнах/экранах меньшего размера.

Такое впечатление, что в HTML/CSS без бубна делаются только самые примитивные вещи, а все остальное непременно требует магии.
Re[5]: Ограничение ширины текста в списке без ужатия изображ
От: rFLY  
Дата: 22.02.19 21:16
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>В таком случае изображения перестают сжиматься в окнах/экранах меньшего размера.

Вынеси тогда картинки за li и сделай 100% max-width
<ul>
  <li>пункт 1<br>
  </li>
  <img src="картинка 1">
  <li>пункт 2
  </li>
  <img src="картинка 2">
</ul>


ЕМ>Такое впечатление, что в HTML/CSS без бубна делаются только самые примитивные вещи, а все остальное непременно требует магии.

Ты хочешь чтобы потомок одновременно и вылазил и не вылазил за границы контейнера и все это без шаманства?
Re[6]: Ограничение ширины текста в списке без ужатия изображ
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 22.02.19 21:49
Оценка:
Здравствуйте, rFLY, Вы писали:

FLY>Вынеси тогда картинки за li и сделай 100% max-width


Я ж в первом сообщении написал, почему это не совсем подходит. И картинки не всегда будут после всего текста пункта.

FLY>Ты хочешь чтобы потомок одновременно и вылазил и не вылазил за границы контейнера и все это без шаманства?


Я ожидал, что язык разметки с 30-летней историей позволит размечать гибко и без шаманства.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.