CSS tự động điều chỉnh không vấn đề chiều rộng ĐẦY ĐỦ

Question

Tôi muốn làm như vậy kích thước của bong bóng, tự động điều chỉnh sau văn bản (nhận xét) nằm trong div .. Trước hết là mã: .bubble { font -size: 12px; margin-bottom: 0px; }

.bubble blockquote { 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #c9c2c1; 
    background-color: #000; 
} 
.bubble blockquote p { 
    display: inline; 
    margin: 0px; 
    padding: 0px; 
     font-size: 18px; 
} 

.bubble cite { 
    position: absolute; 
    margin: 0px; 
    padding: 7px 0px 0px 15px; 
    top: 5px; 
    background: transparent url(b/tip.gif) no-repeat 20px 0; 
    font-style: normal; 
} 

Và trang:

<div class="bubble"> 
<blockquote> 
<p> 
Hello, my name is Azzyh 
</p> 
</blockquote> 
<cite>I wrote this today</cite> 
</div> 

Bây giờ như tôi đã nói, tôi muốn nó tự động điều chỉnh các văn bản, do đó, "bong bóng" là xung quanh "xin chào, tôi tên là azzyh" ..

Không thích như thế nào bây giờ nó là: http://img341.imageshack.us/img341/8303/exampleu.png Như bạn thấy nó đi tất cả ra bên phải + cuối bên trái của trình duyệt ..

Kiểm tra hình ảnh, bạn sẽ thấy dòng ("hộp"), nơi văn bản, quá lớn đối với văn bản. Tôi muốn css để điều chỉnh hộp sau khi văn bản .. vì vậy các "dòng" được xung quanh dòng chữ "xin chào tôi tên là" xin lỗi vì tiếng anh của tôi

Xem hình ảnh này: http://img17.imageshack.us/img17/6057/exampleph.png Các "đỏ" là cách tôi muốn nó là ..

Làm cách nào tôi có thể thực hiện việc này?

Cảm ơn

Answer 1

div yếu tố này là yếu tố khối cấp đó, theo mặc định, căng như xa sang bên trái và bên phải là khối chứa của họ sẽ cho phép.

Để có được độ rộng của div để tự động điều chỉnh, bạn sẽ phải chuyển nó sang một yếu tố nội tuyến, sử dụng phong cách tương tự như bạn đặt trên p: display: inline;

Lưu ý rằng điều này có thể có tác dụng phụ không mong muốn của việc không tự động buộc mỗi div lên một dòng mới. Tuy nhiên, nếu không có thêm thông tin, tôi không hoàn toàn chắc chắn liệu điều đó có tốt hay xấu trong bố cục của bạn.

Answer 2

Di chuyển tài sản biên giới của bạn

border: 1px solid #c9c2c1; 

từ

.bubble blockquote {} 

vào bạn

.bubble blockquote p {} 

và rằng nên đặt hộp nơi bạn muốn nó.

Answer 3

Một vấn đề tương tự như tôi đã được giải quyết bằng cách áp dụng CSS sau đây:

display:inline-block; 

Tôi muốn có một liên kết để trông giống như một nút nhưng không mở rộng nền để điền vào chiều rộng của DIV chứa.

Được hỗ trợ trong gần như tất cả các trình duyệt, bao gồm hỗ trợ một phần trong IE6 và IE7 nhưng chỉ ở nơi phần tử có 'nội dòng' làm mặc định. Có một số alternative properties để nhận hỗ trợ qua trình duyệt. Ngoài ra còn có một cái gì đó trên Google Code for setInlineBlock, nhưng tôi đã không cố gắng này bản thân mình.