Question

我试图在我的标题中制作浮动的div，包括响应Web浏览器大小的ul列表菜单。当使用jquery插件达到960px时，我已经通过菜单实现了它。但我希望div能够对调整浏览器的大小做出反应，直到达到这一点。

这是标记

<div id="header">
    <div id="outterTopWrap">
    <div id="topNavWrap">
        <div id="email">Email Us at:&nbsp; <a href="mailto:elenacipriano2@gmail.com"> elenacipriano2@gmail.com</a></div>
          <div id="innernavWrap">
            <div class="topnav"><a href="#"><img src="images/facebook.jpg" width="48" height="43" alt="facebook" /></a></div>
            <div class="topnav"><a href="#"><img src="images/twitter.jpg" width="48" height="43" alt="twitter" /></a></div>
            <div class="topnav"><a href="#"><img src="images/linkedin.jpg" width="48" height="43" alt="linkedin" /></a></div>
            <div class="topnav"><a href="#"><img src="images/google.jpg" width="48" height="43" alt="google+" /></a></div>
            <div class="topnav"><a href="#"><img src="images/rss.jpg" width="48" height="43" alt="rss" /></a></div>
            </div>
    </div><!-- End topNavWrap -->
    <div id="bottomNav_wrap">
        <div id="logo"><img src="images/sandpiperLogo.png" width="320" height="69" alt="Sandpiper Logo" /></div>
        <div id="navWrap">
                <ul id="Navlist">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Register</a></li>
                        <li><a href="#">Floor Plans</a></li>
                        <li><a href="#">Site Plans</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul> 
       </div><!-- End navWrap -->
      <div id="rightMenu_wrap">
           <div id="tagline">Travel and Tour Wasaga Beach Now!</div>
           <div id="phone">1-800-222-2222</div>
       </div><!-- End leftMenu_wrap -->
    </div><!-- End bottomNav_wrap -->

    </div><!-- End outterTopWrap -->
</div><!--header -->

和CSS

#header{
    position: relative;
    background-color: #252b2b;
    height: 164px;
    width: 100%;
    top:0;
    left:0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-left-color: #343a3b;
}

#outterTopWrap{
    position: relative;
    width: 1170px;
    margin:auto;
    height:164px
    }

#topNavWrap{
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #343a3b;
    position: relative;
    width: 1170px;
    margin:auto;
    height:43px;
}

#bottomNav_wrap{
    width: 1170px;
    height: 120px;
    position:relative;





    }
#innernavWrap{
    height: 43px;
    width: 245px;
    position: absolute;
    right: 0px;
    background-color: #999;
    }

.topnav{
    background-color: #FFF;
    display: inline;
    float: left;
    height: 43px;
    width: 48px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #343a3b;
}   

#email{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 43px;
    color: #929A94;
    height: 43px;
    width: 400px;
    position: absolute;
    left: 0px;
    background-image: url(../images/emailBG.jpg);
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 35px;
}

#logo{
    height: 100px;
    width: 320px;
    position: relative;
    left: 0px;
    padding-top:20px;
    float:left;
}

#rightMenu_wrap{
    position:relative;
    width:265px;
    height:94px;
    float:left; 
    margin-top:26px;
    }
#phone{
    background-image: url(../images/phoneIcon.jpg);
    height: 47px;
    width: 198px;
    position: absolute;
    bottom: 0px;
    right:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    color: #FFF;
    padding-left:58px;
    line-height:47px;
    background-color: #41c6ef;
    background-repeat: no-repeat;
    background-position: left;
    }
#tagline{
    height: 47px;
    width: 265px;
    position: absolute;
    right: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    color: #ec894d;
    line-height:47px;
    font-weight: lighter;
    text-transform: uppercase;
    text-align:right;
    }

/****************Menu Navigation*********************************/

    #navWrap{
        height: 33px;
        position: relative;
        float:left;
        display:inline;
        width:560px;
        margin-top:87px;
        margin-left:25px;
    }

    ul#Navlist{
        margin: 0;
        padding:0;
    }

    ul#Navlist li{
        display: inline;
        list-style-type: none;
        padding-right:7px;
        padding-left:7px;
        padding-top:15px;
        padding-bottom:15px;
        color: #929a9b;
        }

    ul#Navlist li a
        {
        font-family: Arial, Helvetica, sans-serif;
        color: #929a9b;
        text-decoration: none;
        font-weight: lighter;
        font-size: 17px;
    }

    ul#Navlist li a:hover{
        color: #FFF;
    }

    ul#Navlist li:hover{
        background-image: url(../images/listBG.jpg);
        background-repeat: repeat-x;
    }

Answer 1

在没有使用图像的情况下完全测试所有内容很难，而且你的代码有点不对（左边的导航包没有div。无论如何，这是我将如何做到的：

#header {
    max-width: 1170px;
}
#leftNavWrap {
    width: 50%;
    float:left;
}

#rightNavWrap {
    width: 50%;
    float: right;
}

然后，您可以使用媒体查询以较低的像素宽度定位事物。

是否有可能使浮动分区响应？

1 个答案: