Прекратить динамический DIV нажать другие элементы

Question

я следующее:

Text text text2 text text 
text text text text text. 

В какой-то момент я заменяющего это так:

Text text <div class="highlight" style="background-color:red;">text2</div> text text 
text text text text text. 

Но это толкает текст, как я могу это сделать оставаться в том же порядке, что и раньше?

Это то, что я пробовал:

float:left; 

И

parent().css('overflow', 'auto'); 

Это не сработало.
Знаете ли вы какое-либо решение?

Заранее спасибо.

Answer 1

У вас есть два решения:

1) Просто используйте span вместо div

2) Вы можете использовать div, но вы должны определить следующий стиль

div.highlight { 
    display:inline; 
} 

Здесь вы можете найти демонстрацию второго решения: http://jsfiddle.net/smWvA/2/

Answer 2

Вы можете использовать пядь вместо DIV

Text text <span class="highlight" style="background-color:red;">text2</span> text text 
text text text text text. 

Answer 3

Div имеет display:block по умолчанию, и это то, что вызывает куски.

Таким образом, вы можете использовать SPAN insteed, который имеет inline по умолчанию для свойства display

Если вы хотите узнать больше о собственности дисплея посмотрите здесь: https://developer.mozilla.org/en/CSS/display

Answer 4

Не могли бы вы пожалуйста проверить, если class-highlight не имеет родительского css, который он наследует. Попробуйте просмотреть «Вычисленный стиль» для текста2.

Google Chrome: F12, найти свой элемент или просто щелкните правой кнопкой мыши text2 и осмотрите элемент.

вычисленного Стиль находится на верхней правой части окна инспектировать элемента

Answer 5

Я сделал пример на jsfiddle. Если вы решите использовать div, вы должны указать отображение: встроенный или встроенный блок. Спан находится встроенный по умолчанию, так что лучше использовать промежуток здесь ...

Пример: http://jsfiddle.net/3L2K6/