Tôi có thể sử dụng tràn: ẩn mà không có chiều cao rõ ràng bằng cách nào đó không?

Question

Tôi có một hình ảnh với float:left và tôi muốn hình ảnh đó tràn vào phụ huynh của nó, nhưng cắt bỏ tình trạng tràn. Đây là những gì có vẻ như không có overflow quy tắc:

                                   

Dưới đây là những gì tôi muốn:

                                   

Dưới đây là một fiddle: http://jsfiddle.net/ZA5Lm/

For some reason, nó đã quyết định rằng overflow:hidden mà không có một kết quả chiều cao rõ ràng trong các yếu tố phát triển.

Tôi có thể đạt được hiệu quả sau này mà không cần đặt chiều cao rõ ràng không? Chiều cao rõ ràng không hoạt động vì tôi muốn div này tự động kích thước dựa trên chiều dài nội dung và chiều rộng của trình duyệt.

Answer 1

Theo ý kiến ​​của tôi, việc sử dụng tràn: ẩn mà không có thứ nguyên cài đặt không có ý nghĩa. Nếu bạn không muốn để xác định chiều cao của container và nếu hình ảnh của bạn có một chiều rộng cố định bạn có thể sử dụng giải pháp này: http://jsfiddle.net/ZA5Lm/11/

Hình ảnh được định vị theo tuyệt đối, lấy nó ra khỏi giáo khoa lưu lượng. Tuy nhiên - và tôi biết rằng điều này có thể xấu - bạn cần phải chỉ định một padding-left để di chuyển văn bản ra khỏi hình ảnh.

Answer 2

Tôi đã xem một bài đăng trên CSS-Tricks và nó đã nói về điều này. Đi check it out tại - http://css-tricks.com/minimum-paragraph-widths/

Nó có thể là hữu ích :) Chúc may mắn

Cũng chỉ nhìn mã của bạn và tôi đã thêm float: right để div của bạn để nó trông như thế này -

div { 
border: 1px solid black; 
padding: 10px; 
float: right 
/*overflow: hidden;*/ 
} 

Bạn không chắc chắn nếu đó là những gì bạn muốn?

Answer 3

Đó là một chút khôn lanh (tôi sử dụng tương đối + định vị tuyệt đối và một đệm cụ thể để xác định vị trí văn bản), nhưng nó có tác dụng bạn hỏi mà không thay đổi đánh dấu hoặc thiết height:

body { 
    padding: 10px; 
} 
img { 
    float: left; 
    position: absolute; 
    left : 10px; 
} 
div { 
    border: 1px solid black; 
    padding: 10px 10px 10px 280px; 
    position : relative; 
    overflow: hidden; 
} 

Tôi chỉ phong cách chèn (thậm chí nếu float:left sẽ không còn cần thiết)