0

親コンテナがあります。いくつかのテキスト、float:right 画像、およびオプション ボックスがあります。通常、オプション ボックスは表示されません。ただし、その場合は、その下のテキストの上に表示する必要があります (つまり、position:absolute)。

問題は、オプション ボックスを親の外側に拡張する必要がある一方で、他の要素は親の内側にとどめなければならないことです。または、オプション ボックスは親を展開する必要がありますが、それでもテキストの上に表示されます。

スクロールできる必要があるため、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;
}
4

3 に答える 3

0

他のすべての後に最後の行を追加することで修正できました。

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

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

于 2013-07-29T06:20:13.117 に答える
0

使用をやめる

フロート: 左;

フロート: 右;

使用する

表示: インラインブロック;

代わりは。このようにして、画像は親要素を展開します。

于 2013-07-28T04:32:26.213 に答える
0

私の解決策は次のとおりです。画像の高さを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

于 2013-07-28T11:38:29.190 に答える