如何讓圖像浮出一個清除包裝？

考慮這個例子：http://jsfiddle.net/K4qKk/如何讓圖像浮出一個清除包裝？

由於包裝被正確清除，所以圖像高度擴展了包裝高度。

<div class="wrapper"> 

    <div class="b1"> B1 </div> 
    <div class="image"> 
     <img src="http://lh6.ggpht.com/zoUh3l0iIQXaV83M32fDab8LtsBNCVL7FX-gbs5NL-8ulFYYTkZkZvOh1KquPNg8aw5CckHNSDpdo4nDg4CH-9jiEJ3xLU_rFymtZM9K" /> 
    </div> 
    <div class="b2"> B2 </div> 
    <div class="b3"> B3 </div> 
    <div style="clear:both;"></div> 

</div>

我要的是包裝身高只有延伸至B1，B2，B3的高度，使圖像看起來就像是取出包裝的，這可能嗎？

enter image description here

來源

2014-03-28 Ryan

這可能是你在找什麼http://jsfiddle.net/K4qKk/4/ –

您可以使用display: inline-block您的div和.image，設置圖像包裝的高度，並使用一些負面的利潤率中心的包裝內的圖像。

DEMO

來源

2014-03-28 08:20:09 Mathias

這種技術似乎不錯，但你沒有使用'顯示：inline-block的'，你可以堅持'float：left;'看到這裏：http://jsfiddle.net/webtiki/d6mnd/1/ –

@ web-tiki使用'inline-block'的想法可能是因爲圖片發佈在OP的問題中。 –

如何讓圖像浮出一個清除包裝？

回答

相關問題