CSS - div mẹ không mở rộng thành chiều rộng/chiều cao của con

Question

Tôi đang tìm cách phủ một chú thích lên hình ảnh. Tôi đã quản lý để làm điều này, nhưng hình ảnh đang mở rộng ra khỏi phụ huynh div.

Tôi có chứa div đặt thành inline-block, vì tôi muốn nó 'kích thước tự động', không chiếm width: 100%. Nếu bạn nhìn vào đầu ra hiện tại, bạn sẽ thấy hình ảnh có thể nằm trong hộp viền màu đen.

Chỉ cần hoạt động trong Chrome, nếu bạn gặp phải sự cố trên nhiều trình duyệt.

Cảm ơn trước!

LIVE DEMO

---

CSS:

#body_content { 
    border: solid 1px blue; 
    display: inline-block;  
    padding: 5px; 
} 
#body_header { 
    border: solid 1px red; 
    font-size: 25px; 
    padding: 5px; 
} 
#body_image { 
    position: absolute; 
} 
#body_image_caption { 
    color: white; 
    line-height: 30px; 
    margin-left: 10px; 
} 
#body_image_container { 
    background: white; 
    border: solid 1px black; 
    margin-top: 3px; 
    padding: 10px; 
} 
#body_image_overlay { 
    background-color: black; 
    bottom: 5px; 
    display: block; 
    height: 30px; 
    opacity: 0.85; 
    position: absolute; 
    width: 100%;  
}​ 

HTML:

<div id="body_content"> 
    <div id="body_header"> 
     Heading 
    </div> 
    <div id="body_image_container"> 
     <div id="body_image"> 
      <img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" /> 
      <div id="body_image_overlay"> 
      <div id="body_image_caption"> 
       Some Text 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Phần tử #body_image đang thoát khỏi #body_image_container vì position của nó được đặt thành absolute. Các phần tử vị trí tuyệt đối được loại bỏ khỏi luồng của tài liệu, làm cho các phần tử cha bị sụp đổ như thể phần tử con không có ở đó. Nếu bạn thay đổi nó để relative, sau đó nó trở nên chứa trong các hộp đen:

#body_image{ 
    position: relative; 
} 

http://jsfiddle.net/AaXTm/2/

Answer 2

Kiểm tra fiddle này. Bạn cần đặt vị trí của phần tử con của hình ảnh là tuyệt đối và phần tử gốc là tương đối. Thay đổi chiều rộng của chú thích cho phù hợp.

child-element { 
    position:absolute; 
} 

parent-element { 
    position:relative 
} 

http://jsfiddle.net/AaXTm/4/

Answer 3

Hãy thử css này trong div cha mẹ.

Overflow:auto