Положение текста внутри строки

Question

Это живая демонстрация: http://jsfiddle.net/9Y7Cm/5/

С этим все в порядке, пока ширина текста не станет больше ширины div.

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

Здесь вы можете увидеть, что происходит, его ширина текста больше, чем divширина контейнера:

http://jsfiddle.net/9Y7Cm/12/

Есть ли способ это исправить?

Answer 1

Просто удалите display:inline-block; из CSS для элемента span ( пример jsFiddle ).

Подробнее о display:inline-block.

inline-block: это значение заставляет элемент генерировать контейнерный блок встроенного уровня. Внутренняя часть встроенного блока отформатирована как блок блока, а сам элемент отформатирован как атомарный блок на уровне строки.

Answer 2

Приведите ширину правого содержимого и поместите его вправо, например так:

http://jsfiddle.net/9Y7Cm/14/

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

Answer 3

Проблема с display:inline-block для диапазона. Удалите его, и текст будет в той же строке