Фоновое изображение элемента блока идет позади элемента с плавающей точкой

Question

У меня небольшая проблема с фоновым изображением в элементе блока, которому предшествует плавающий элемент.

Я плаваю изображение слева, а затем H1. Как и ожидалось, H1 (который является элементом уровня blocl) течет за изображением, но его содержимое (фактический заголовок) отображается справа от изображения.

К сожалению, фоновое изображение, которое я использую на H1, должно быть выровнено по левому краю и, таким образом, появляется за фактическим img, потому что в отличие от содержимого это не продвигается плавающим поведением.

Пример:

http://jsfiddle.net/WwuqG/

(я установил второй заголовок на clear: left, чтобы показать, как он должен выглядеть).

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

Другой вариант - добавить значок заголовка в элемент внутри h1, но это не семантически правильно.

Есть ли лучшее решение только для css, которое не требует дополнительных элементов?

Answer 1

добавить overflow:hidden к h1

новый скрипка

Answer 2

Я немного запутался.

Если я сделаю то, что вы предложили:

установите левое поле заголовка чуть больше ширины плавающего изображения

Это выглядит так: http://jsfiddle.net/WwuqG/1/

Моя путаница связана с тем фактом, что ваша проблема ... действительно проста для решения.

• Такжедобавьте float: left к <h1>: http://jsfiddle.net/WwuqG/2/

Это работает с любым width изображением: http://jsfiddle.net/WwuqG/3/

Это или я неправильно понял?