Question

在我正在制作的这个小网站上，我有很多设置为页面宽度100％的div，这使得它们在调整页面大小时可以保持居中。然而，对于我顶部的导航栏，两个div在彼此相同的行上，所以当它们接近时我遇到了重叠的问题。

有没有办法缩小标题div的大小并将其推到左上方为菜单腾出空间？

全屏 - http://i.imgur.com/UfV2XRX.jpg 已调整大小 - http://i.imgur.com/ql3iH6c.jpg

HTML

    <!DOCTYPE html>

<html lang="en">
<head>
    <link href="style.css" rel="stylesheet" type="text/css">

    <title>Premier Choice Holidays</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
</head>

<body>
    <div id="designcontainer">
        <div id="bannercontainer">
            <div id="bannerwrapper">
                <img alt="appropriate alt text" class="logo" src=
                "images/logo.png">

                <div id="title">
                    <div class="boldfont">
                        Premier Choice Holidays
                    </div>
                </div>


                <div id="nav">
                    <ul>
                        <li>
                            <a href="index.html">Home</a>
                        </li>


                        <li>
                            <a href="findoutmore.html">Find Out More</a>
                        </li>


                        <li>
                            <a href="offers.html">Offers</a>
                        </li>


                        <li>
                            <a href="credits.html">Credits</a>
                        </li>


                        <li>
                            <a href="wireframe.html">Wireframe</a>
                        </li>


                        <li>
                            <a href="admin.html">Admin</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <div id="content">
            <div id="main">
                <div class="smallfont">
                    Your number one destination for holidays
                </div>


                <h2 class="title">Check out some of our exclusive offers
                below!</h2>


                <p class="whitefont">Here at premier choice holidays we offer
                you the best holidays available, from the top right of our site
                you can navigate to our different pages.</p>


                <p class="whitefont">Below you will find some of the popular
                offers we have currentley, you can view more on the "Find Out
                More" page.</p>
            </div>


            <div id="photogrid">
                <h2 class="title">Click an image below to enlarge it</h2>
                <br>


                <div id="photocrop">
                    <a href="offers"><img class="photos" src= "images/property_1.jpg">
                    <a href="offers"><img class="photos" src= "images/property_2.jpg">
                    <a href="offers"><img class="photos" src= "images/property_3.jpg">
                    <a href="offers"><img class="photos" src= "images/property_4.jpg">
                    <a href="offers"><img class="photos" src= "images/property_1.jpg">
                    <a href="offers"><img class="photos" src= "images/property_1.jpg">
                    <a href="offers"><img class="photos" src= "images/property_2.jpg">
                    <a href="offers"><img class="photos" src= "images/property_3.jpg">
                    <a href="offers"><img class="photos" src= "images/property_4.jpg">
                    <a href="offers"><img class="photos" src= "images/property_1.jpg">                   
                    <a href="offers"><img class="photos" src= "images/property_2.jpg">
                    <a href="offers"><img class="photos" src= "images/property_3.jpg">
                    <a href="offers"><img class="photos" src= "images/property_4.jpg">
                    <a href="offers"><img class="photos" src= "images/property_1.jpg">
                    <a href="offers"><img class="photos" src= "images/property_1.jpg">                
                    </a>
                </div>
            </div>
        </div>


        <div id="footer">
            Copyright &copy; Premier Choice 2015
        </div>
    </div>
</body>
</html>

CSS

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 1100px) {
body {
    margin:0;
    text-align:center;
    background-color:#48c0ff;
    background-size:100%;
    background-repeat:no-repeat
}

.photos {
    width:200px;
    height:200px;
    border-style:solid;
    border-width:2px;
    margin:5px
}

#nav ul {
    list-style-type:none;
    padding:0
}

#nav li {
    padding:5px
}

#nav.selected {
    font-weight:700
}
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1100px) {
* {
}

body {
    text-align:center;
    margin:0
}

#designcontainer {
    background-color:#eee;
    font-family:Helvetica,Arial,sans-serif;
    background:url(images/banner.jpg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    top:0;
    left:0;
    position:relative;
    padding-top:20px;
    padding-bottom:30px;
    height:auto
}

a {
    text-decoration:none;
    color:#fff
}

h1,h2,h3 {
    margin:0
}

#bannercontainer {
    background:rgba(0,0,0,0.3);
    width:100%;
    margin-left:auto;
    margin-right:auto
}

#content {
    padding:0
}

#nav {
    width:600px;
    float:right
}

#nav ul {
    list-style-type:none;
    padding:0
}

#nav.selected {
    font-weight:700
}

#main {
    margin-left:auto;
    margin-right:auto;
    width:auto;
    background-color:rgba(0,0,0,0.49)
}

#footer {
    background-color:rgba(0,0,0,0.42);
    color:#fff;
    text-align:right;
    padding:10px;
    position:relative;
    width:auto;
    bottom:-20px
}

#nav li {
    display:inline;
    background-color:rgba(0,0,0,0.13);
    border-style:solid;
    border-width:1px;
    border-color:rgba(255,255,255,0.67);
    padding:10px
}

#title {
    float:left;
    width:auto;
    position:relative;
    top:15px;
    left:200px
}

.logo {
    position:relative;
    width:80px;
    height:80px;
    left:180px;
    float:left
}

.boldfont {
    font-size:50px
}

.smallfont {
    font-size:18px;
    color:#fff
}

#title2 {
}

.whitefont {
    color:#fff
}

h2 {
    color:#50d7ff
}

#bannerwrapper {
    top:0;
    position:relative;
    color:#fff;
    height:80px;
    width:auto;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto
}

#photogrid {
    margin-left:auto;
    margin-right:auto;
    height:auto;
    width:900px;
    border-style:solid;
    border-color:#6db6ff;
    background:rgba(35,148,247,0.38);
    border-width:1px
}

#photocrop {
    background-color:rgba(255,255,255,0);
    position:relative;
    text-align:center;
    margin:15px;
    height:auto;
    overflow:hidden
}

img {
}

.photos {
    width:200px;
    height:200px;
    border-style:solid;
    border-width:2px;
    margin:5px
}

.title {
    color:#fff;
    position:relative;
    text-align:center
}

p.blue {
    font-color:blue
}

a:link {
    color:#fff;
    background-color:transparent;
    text-decoration:none
}

a:visited {
    color:#fff;
    background-color:transparent;
    text-decoration:none
}

li:hover {
    color:#fff;
    background-color:transparent;
    text-decoration:underline
}

a:active {
    color:#fff;
    background-color:transparent;
    text-decoration:none
}
}

Answer 1

尝试在智能手机的媒体查询中为#nav设置position：static

重叠Div如何缩小其他适合

1 个答案: