Dừng div động để đẩy các yếu tố khác

Question

Tôi đã điều sau đây:

Text text text2 text text 
text text text text text. 

Tại một số điểm tôi thay thế này này:

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

Nhưng nó đẩy các văn bản, làm thế nào tôi có thể làm cho nó giữ nguyên thứ tự như trước đây?

Đây là những gì tôi đã cố gắng:

float:left; 

Và

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

Nó đã không làm việc.
Bạn có biết giải pháp nào không?

Xin cảm ơn trước.

Answer 1

Bạn có hai giải pháp:

1) Chỉ cần sử dụng span thay vì div

2) Bạn có thể sử dụng div nhưng bạn phải xác định phong cách sau đây

div.highlight { 
    display:inline; 
} 

Ở đây bạn có thể tìm thấy bản trình diễn của giải pháp thứ hai: http://jsfiddle.net/smWvA/2/

Answer 2

Bạn có thể sử dụng khoảng thời gian thay vì div

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

Answer 3

Div có display:block làm mặc định và đó là những gì có hiệu lực.

Vì vậy, bạn có thể sử dụng SPAN insteed trong đó có inline như mặc định cho tài sản display

Nếu bạn muốn tìm hiểu thêm về các thuộc tính display có một cái nhìn ở đây: https://developer.mozilla.org/en/CSS/display

Answer 4

Ông có thể xin kiểm tra xem lớp nổi bật không có bất kỳ css cha mẹ mà nó thừa kế. Thử xem "Kiểu được tính toán" cho văn bản2.

Google Chrome: F12, xác định vị trí phần tử của bạn hoặc đơn giản click chuột phải vào Text2 và kiểm tra Element.

Kiểu được tính toán ở trên cùng bên phải của cửa sổ phần tử kiểm tra

Answer 5

Tôi đã làm ví dụ về jsfiddle. Nếu bạn quyết định sử dụng div, bạn phải chỉ định display: inline hoặc inline-block. Span là inline theo mặc định, vì vậy nó là tốt hơn để sử dụng khoảng thời gian ở đây ...

Ví dụ: http://jsfiddle.net/3L2K6/