css - CSS，只让 1 个孩子在父母之外扩展。浮动图像必须留在里面

Question

我有一个父容器。它有一些文本、一个 float:right 图像和一个选项框。通常选项框是不可见的。但是，当它出现时，它必须出现在它下面的文本之上（所以位置：绝对）。

问题是选项框需要延伸到父级之外，而其他元素必须留在父级内。或者，选项框应展开父项，但仍位于文本顶部。

Position:fixed 不起作用，因为它必须可以滚动。我创建了一个小提琴来说明这个问题。

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

我的解决方案是：为您的图像使用一个高度，例如 100px 并将您的父级的最小高度设为 100px 这是我的 css

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

你可以在这里查看： FIDDLE

Answer 2

我能够通过在其他所有内容之后添加最后一行来修复它：

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

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

Answer 3

停止使用

向左飘浮;

浮动：对；

利用

显示：内联块；

反而。这样，您的图像将扩展父元素。