изображение плавающий текст и все очистить?

Question

всегда одна и та же структура.

изображение (с плавающей точкой: слева) текст изображение (с плавающей точкой: слева) текст изображение (с плавающей точкой: слева) текст изображение (с плавающей точкой: слева) текст

однако, если текст недостаточно длинный, следующее изображение будет всплывать снова и снова. Я всегда хочу, чтобы одно изображение с небольшим количеством текста всплыло рядом с ним. тогда должен быть перерыв и снова то же самое. Однако у меня нет реального перерыва, из-за CMS. я хочу стилизовать это так css.

Я пытался установить четкость: для каждого изображения, но это не работает.

любая идея, как мне этого добиться. в настоящее время каждый img имеет:

img {
float:left;
clear:both; /*doesn't do anything*/
}

Answer 1

Попробуйте clear:left на изображении:

<style>
    img {
        float:left;
        clear:left;
    }

    p {
        float:left;
    }
</style>

<img src="http://dummyimage.com/300" alt=""><p>text</p>
<img src="http://dummyimage.com/300" alt=""><p>text</p>
<img src="http://dummyimage.com/300" alt=""><p>text</p>
<img src="http://dummyimage.com/300" alt=""><p>text</p>

Это предотвратит появление на изображениях чего-либо с левой стороны, заставив их перейти на новую строку.

Answer 2

clear должен появиться в первом элементе, который больше не должен плавать. Следовательно, использование float и clear на одном элементе исключает само себя.