Detener div dinámica para impulsar otros elementos

Question

Tengo el siguiente:

Text text text2 text text 
text text text text text. 

En algún momento estoy reemplazando esto a esto:

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

Pero empuja el texto, ¿cómo puedo hacerlo permanecer en el mismo orden que antes?

Esto es lo que he intentado:

float:left; 

Y

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

No funcionó.
¿Conoces alguna solución?

Gracias de antemano.

Answer 1

usted tiene dos soluciones:

1) sólo tiene que utilizar span en lugar de div

2) Se puede utilizar div pero hay que definir el siguiente estilo

div.highlight { 
    display:inline; 
} 

Aquí puede encontrar una demostración de la segunda solución: http://jsfiddle.net/smWvA/2/

Answer 2

Puede utilizar lapso en lugar de div

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

Answer 3

Div tiene display:block por defecto y eso es lo que hace que esos efectos.

lo que podría utilizar SPAN insteed que tiene inline como predeterminado para la propiedad display

Si desea leer más acerca de la propiedad de presentación echar un vistazo aquí: https://developer.mozilla.org/en/CSS/display

Answer 4

Podría pls comprueban si el class-highlight no tiene ningún CSS padre que herede. Intente ver el "Estilo Computado" para text2.

Google Chrome: F12, localizar el elemento o simple clic derecho del texto2 e inspeccionar elemento.

El estilo es computada en la parte superior derecha de la ventana inspeccionar elemento

Answer 5

hice un ejemplo de jsFiddle. Si decide usar div, debe especificar display: inline o inline-block. Span está en línea de forma predeterminada, por lo que es mejor usar lapso de aquí ...

Ejemplo: http://jsfiddle.net/3L2K6/