css - 縮小父div以適合一個孩子的寬度並約束另一個孩子的寬度

說，父div有兩個子div，一個包含文本，另一個包含已知（但可變）寬度的圖像& height 。css - 縮小父div以適合一個孩子的寬度並約束另一個孩子的寬度

我想

第一子的寬度div來縮小以適合的圖像的寬度（這我能做到）
父DIV（未指定的寬度的（含有圖像））以適應包含圖像的div的寬度（這也可以）
無論文本包含的文本的數量如何，該文本包含的第二個子div（也是未指定的寬度）匹配父div的寬度（這是棘手的地方）。

我有一個工作版本，做什麼，我想直到第二子文本的數量推動父div的寬度比圖像的寬。

這裏是我的代碼：

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>

，這裏是一個的jsfiddle： http://jsfiddle.net/BmbAS/1/

你可以看到它的點擊走錯了'加長/縮短文字'鏈接來增加q文本

tldr的uantity - 我希望所有的div是相同的寬度，該寬度等於圖像

PS的寬度。現代瀏覽器解決方案只需要

來源

2012-10-05 caitriona

請參閱this edited version你的jsFiddle。

這裏是什麼加入CSS：

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

來源

2012-10-05 13:21:46 Chris

太棒了。那就是訣竅！我應該知道該解決方案將包括表格顯示，因爲它是一個表格，用於解決翻譯問題; – caitriona

我見過的這個魔法是什麼！？ – Aaronius

-2

如果你願意使用一些JavaScript（jQuery的在這個例子中），您可以設置文字的div的寬度與圖像的寬度DIV。

嘗試在提琴添加$("#child2").css({'width': $('#child1').width()});到JS的結束，或者看看這裏的叉：http://jsfiddle.net/VXEMu/

來源

2012-10-05 13:28:32 CommissarXiii

啊，我忘了提及（我知道我會忘記一些東西），我正在尋找一個只有css的解決方案。 – caitriona

對於這麼簡單的事情你真的不應該使用腳本。 – kingPuppy

css - 縮小父div以適合一個孩子的寬度並約束另一個孩子的寬度

回答

相關問題