4

我有以下 div 结构

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

现在当我从浏览器放大或缩小时，"storeFinder"向右/向左移动......

我在网上搜索过，发现需要一个包装器，"storeFinder"这样它就不会随着移动而移动，<body>并且指定min-width也可以解决问题。

就我而言，我已经有一个wrapperdiv 并指定了min-width也可以帮助我。

在这里非常糟糕地寻求帮助。

 #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

您正确的 CSS 代码Working Jsfiddle here

#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 回答
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 回答