CSS，讓只有1個孩子延伸到父母之外。浮動圖像必須留在

Question

我有一個父容器。它有一些文字，一個float：right圖像和一個選項框。通常，選項框不可見。但是，如果它是，它必須出現在它下面的文本的頂部（如此位置：絕對）。

問題是選項框需要擴展到父級之外，而其他元素必須保留在父級之內。或者，選項框應展開父級，但仍位於文本之上。

位置：固定不起作用，因爲它必須可以滾動。 我已經創建了一個小提琴來說明問題。

http://jsfiddle.net/VU5Ub/1/

的圖像是父外部。

<div id = "page"> 
    <div id = "parent"> 
     <div id = "top_text">Pick 1:</div> 
     <div id = "image"> </div> 
     <div id = "x">&nbsp; 
      <div id = "options"></div> 
     </div> 
     <div>i get hidden by the options, as desired</div> 
    </div> 
</div> 

#page{height:230px;} 
#parent{width:200px; 
    background:red; 
    overflow:visible; 
} 
#top_text{float:left;} 
#options{height:200px; 
    background:yellow; 
    width:50px; 
    position:absolute; 
    z-index:2 

} 
#x{position:relative;} 
#image{height:90px; 
     width:40px; 
     float:right; 
    margin-right:10px; 
    background:pink; 
} 

Answer 1

我能夠一切之後加入最後一行來解決它：

#lastline{clear:both;height:0px;} 

http://jsfiddle.net/VU5Ub/3/

Answer 2

使用

浮子停止：左;

float：right;

使用

顯示：內聯塊;

改爲。這樣你的圖片就會展開父元素。

Answer 3

我的解決方法是：使用高度爲你的形象，說100像素，讓你的父母的最小高度100像素這裏是我的CSS

#image{ 
height:100px; 
width:40px; 
float:right; 
margin-right:10px; 
background:pink; 
} 
#parent{ 
width:200px; 
background:red; 
overflow:visible; 
min-height:100px; 
} 

您可以點擊此處查看：FIDDLE