Kéo dài một div để vừa với nội dung hoàn toàn được định vị

Question

Có cách nào để thực hiện điều này chỉ với css và không có tập lệnh nào không? Tôi có một div với chiều rộng tối thiểu, và bên trong của nó là một div bên trong được định vị hoàn toàn với nội dung được tạo động có chiều rộng biến đổi. Đôi khi nội dung mở rộng ra ngoài div chứa, nhưng kể từ khi nó được định vị hoàn toàn, nó sẽ không kéo dài div chứa. Làm thế nào để tôi có được nó để kéo dài div có chứa? Cảm ơn

Answer 1

Hãy thử tham chiếu JSfiddle này mà tôi đã tạo. http://jsfiddle.net/gA7mB/ Nếu tôi đọc đúng, đó là cơ bản những gì bạn đang tìm kiếm.

HTML

<div class="container" > 
<div class="relative" > 
    <div class="absolute" > 

     <h1>I am Content i can be as long as you wish. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</h1> 

    </div> 
</div> 

CSS

.container{ 
    width: 500px;    
} 

.relative{ 
    position: relative; 
    background: #666; 
    min-width: 200px; 
    min-height: 200px; 
} 

.absolute{ 
    position: absolute; 
    background: #999; 
    top: 20px; //not important, just to show absolute position 
    left: 20px; //not important, just to show absolute position  
} 

Answer 2

Nếu yếu tố nội dung của bạn có position: absolute, nó không phải là có thể. Tuy nhiên, đôi khi bạn có thể tránh được vị trí tuyệt đối mà vẫn thu được kết quả mong muốn bằng cách sử dụng phần tử thả nổi thay thế. Xem this answer đến very similar question để biết ví dụ.