Выравнивание текста по картинкам

Question

У меня есть изображение на моей веб-странице, в которое я хочу обернуть текст справа от него, поэтому у меня есть немного CSS вроде:

.image {
  float:left
}

Но после достижения определенной точки в тексте я хочу убедиться, что текст больше не отображается справа от изображения, я хочу, чтобы он был ниже изображения. Какой тег можно использовать, чтобы разбить текст на новую строку под изображением?

Answer 1

Оберните текст, который вы хотите отобразить под изображением в элементе контейнера, со стилем clear: left, примененным к нему.

Раздел Floats спецификации CSS содержит более подробную информацию об этом, включая хороший пример, иллюстрирующий, как работает свойство clear.

Answer 2

Полагаю, вы хотите определить, сколько свободного места находится под изображением. Попробуйте настроить margin-bottom изображения:

 IMG  text text text
 IMG  text text text
         text text text
         text text text
 text text text text
 text text text text

Таким образом, весь текст может быть в одном абзаце. И он будет красиво обтекать изображение.

Затем поместите элемент в стиле clear:both;, чтобы отключить перенос текста после текста (на случай, если текст недостаточно длинный)

Answer 3

Текст в div со следующими стилями

{ float:left; clear:left; }

Следующий объект появится ниже и слева.