4

私は次のdiv構造を持っています

 <div id="wrapper">
     <div id="header">
          <div id="storeFinder">
                        /*  html goes here */
          </div>
     </div> 
 </div>

ブラウザからズームインまたはズームアウトすると、"storeFinder"右/左に移動します...

オンラインで検索したところ、と"storeFinder"一緒に移動しないようにラッパーをラップする必要があり、<body>を指定するmin-widthことで問題を解決できることがわかりました。

私の場合、私はすでにwrapperdivを持っており、 min-widthdintも指定すると役に立ちます。

ここで非常にひどく助けを探しています。

 #wrapper {
            background: white;
            background-position: 50% 0px;
            width: 984px;
            margin: 0px auto 0 auto;
            text-align: center;
        }

    #header {
        width: 960px;
        height: 60px;
        margin: 0 5px 2px 5px;
        text-align: left;
        background: white;
        display: block;
        position: relative;
     }

   #storefinderdropdown {
        position: absolute;
        top: 8px;
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 342px;
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }
4

3 に答える 3

3

position: relative親にを付けてみてください。それは、文書に従ってではなく、親に従って絶対的であるように子供の位置を制限します。この記事では、詳細と例を示します：http: //css-tricks.com/absolute-positioning-inside-relative-positioning/

于 2012-07-04T15:42:37.030 に答える
1

これを試して：

#storefinderdropdown {
        position: absolute;
        top: 8px;
    left: 342px; /*Add This*/
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 0; /* Change This*/
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }​

これはあなたに役立つかもしれません。

于 2012-07-04T15:44:34.830 に答える
1

ここで正しいCSSコードWorkingJsfiddle

#wrapper {
            background: white;
            background-position: 50% 0px;
            width: 984px;
            margin: 0px auto 0 auto;
            text-align: center;
        }

    #header {
        width: 960px;
        height: 60px;
        margin: 0 5px 2px 5px;
        text-align: left;
        background: white;
        display: block;
        position: relative;
     }

   #storeFinder {
        position: absolute;
        top: 8px;
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 0px;
        left:342px;
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }
于 2012-07-04T15:49:50.383 に答える