Как установить минимальную ширину текста сбоку от картинки?

Question

[Алексей]

Если картинка выравнена по , скажем, левой стороне и обтекается текстом. Как сделать так, что ни некоторой ширине пространства для текста он не обтекал, а размещался внизу картинки?
Т.е. проблема что если начать уменьшать размер экрана (окна), может получится так что какой нибудь предлог поместится сбоку, а все остальное перенесется, да и вообще начиная с какого то размера, все слова просто сбоку выстраиваются в столбик и читать неудобно.
Как решить эту проблему?

Answer 1

[Александр Токарчук]

Есть min-width.
Но лучше использовать

@media(max-width:1280px) {
....
}
@media(max-width:1024px) {
....
}

Comments

[Алексей]

1.Картинку могут быть разной ширины, так что не совсем подойдет
2. Почему лучше?
3.min-width вроде добавляет полосу прокрутки а не переносит, как заставить переносить?

[Сергей Горячев]

Алексей selftrips.ru,

1.Картинку могут быть разной ширины, так что не совсем подойдет

Приводить картинки к более или менее одинаковой ширине, например, не больше 500 пикселей в ширину, при этом, перестраивание начинать уже на 800-1000 пикселей.

[Алексей]

Сергей Горячев, иногда я две картинки использую selftrips.ru/strany-i-mesta/severnaya-amerika/ssha...
Можно конечно 2 разных класса прописать... но более простого пути нет что ли?

[Dmitry Sokolov]

Алексей selftrips.ru, А вот комменты не читал.

selftrips.ru/strany-i-mesta/severnaya-amerika/ssha...

Текст что в одном параграфе с картинкой вытащи его из этого параграфа и размести отдельно в другой параграф, на телефоне/планшете просто float: none для картинок ставишь и все.
Или изображения что в параграфе обернуть в span и на телефоне/планшете ему display:block
Не вариант?

[Алексей]

Dmitry Sokolov, можете пример показать?

[Dmitry Sokolov]

Алексей selftrips.ru,
Вот пример. НО СРАЗУ сказу селекторы так не стоит прописывать, не производительные.

Допустим нам надо чтобы на планшете и телефоне текст был ЗА изображением.
Прописываем так

@media all and (max-width: 767px) {
#content .text-after img.alignleft, #content .text-after img.alignleft{
    float:none
}
}

Вот кусок "корявого" кода из файрбага на действующем сайте (PS: не прописал в примере media)

[Алексей]

Dmitry Sokolov, ничего не понял, можете пример здесь сделать https://codepen.io/ или в другом подобном сервисе.