css - thu nhỏ div cha để vừa với chiều rộng của một đứa trẻ và hạn chế chiều rộng của đứa trẻ khác

Question

Giả sử div cha có hai div con, một chứa văn bản, div kia chứa hình ảnh có chiều rộng đã biết (nhưng biến) chiều cao & .

Tôi muốn

• chiều rộng của đứa con đầu lòng (hình ảnh chứa) div co lại cho phù hợp với chiều rộng của hình ảnh (i này có thể làm)
• div mẹ (chiều rộng không xác định) để co lại để vừa với chiều rộng của div chứa hình ảnh (điều này cũng ok)
• div con chứa văn bản thứ hai (cũng có chiều rộng không xác định) để khớp với chiều rộng của div cha mẹ bất kể số lượng văn bản chứa (đây là nơi nó trở nên phức tạp).

Tôi có một phiên bản làm việc mà những gì tôi muốn cho đến khi số lượng văn bản trong đứa con thứ hai đẩy chiều rộng div cha mẹ rộng hơn so với hình ảnh.

Dưới đây là mã của tôi:

css:

#container{border:1px solid #f00;display:inline-block;} 
#child1{border:1px solid #0f0;} 
#child2{border:1px solid #00f;} 
img {border:1px solid #000;} 

html:

<div id="container"> 
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> 
<div id="child2">Lorem ipsum dolor sit amet.</div> 
</div> 

và đây là một jsfiddle: http://jsfiddle.net/BmbAS/1/

bạn có thể nhìn thấy nơi nó đang xảy ra sai bằng cách nhấp chuột liên kết 'kéo dài/rút ngắn văn bản' để tăng q uantity văn bản

TLDR - tôi muốn tất cả các divs là cùng một chiều rộng tương đương với chiều rộng của hình ảnh

ps. giải pháp trình duyệt hiện đại chỉ cần thiết

Answer 1

Xem this edited version trong số jsFiddle của bạn.

Dưới đây là những gì đang được bổ sung vào CSS:

#container { 
    display: table-cell; 
} 
#child1 { 
    display: table-row; 
    width: 1px; 
} 
#child2 { 
    display: table-cell; 
    width: 1px; 
} 

Answer 2

Nếu bạn sẵn sàng để sử dụng một chút javascript (jQuery trong ví dụ này), bạn có thể thiết lập độ rộng của div văn bản với chiều rộng của hình ảnh div.

Hãy thử thêm $("#child2").css({'width': $('#child1').width()}); đến hết JS trong fiddle của bạn, hoặc kiểm tra các ngã ba ở đây: http://jsfiddle.net/VXEMu/