0

http://jsfiddle.net/rajkumart08/8p2mZ/2/embedded/result/

その他のオプションをクリックするとポップアップが表示されますが、ブラウザーがマウスを使用している場合、幅と高さを縮小すると... ポップアップはその他のオプションの div と一緒に移動しません...

問題を解決するにはどうすればよいですか? 助けてください。

私のコードはここにあります: http://jsfiddle.net/rajkumart08/8p2mZ/3/

.openme {
            display: inline-block;
            padding: 10px;
            cursor: pointer;
            padding: 0;
            margin: 0 20px 0 0;
            width: 200px;
            height: 200px;
            list-style-type: none;
            background: white;
            border: 1px solid #999;
            line-height: 200px;
            padding: 0;
        }

        #menu{
            display: inline-block;
            opacity: 0;
            visibility: hidden;
            position: absolute;
            padding:0px;
            border: solid 1px #000;
            margin: 0 auto 0 auto;
            background: white;
            top: 350px;
            left: 649px;
            -webkit-box-shadow: 0px 2px 13px rgba(50, 50, 50, 0.48);
        }
        #menu.show {
            opacity: 1;
            visibility: visible;
        }

        #menu a{
            float:left;
            /*margin: 7px;*/
            padding: 10px 20px;
            font-weight: bold;
            font-size: 10px;
            text-align: center;
            background: white;
            color: black;
            word-wrap: normal;
            /*border: 1px solid red;*/

        }
4

2 に答える 2

0

まず、親コンテナの.app-homediv に最小幅を指定し、それを「position:relative」にします。次に、メニュー div に左の代わりに右の位置を使用します。

于 2012-08-22T07:31:57.483 に答える
0

1 つの方法は、メニューの位置をウィンドウ サイズの % で指定することです。

例えば

それ以外の

top: 350px;
left: 649px;

特定

top: 15%;
left: 15%;

これにより、サイズ変更時にメニューがウィンドウの幅に対して常に配置されるようになります。

于 2012-08-22T03:13:34.187 に答える