Question

当我调整浏览器窗口大小时，我的中央块继续向左移动

正常：

调整浏览器窗口大小后：

所以我设法弄清楚如何在调整大小期间保持导航和页脚相对不中断，但我似乎无法弄清楚如何处理身体，请帮忙吗？

HTML：

<html>
<head>
    <title>Line After Line</title>
    <link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>

</head> 

<body>
    <div id = "top">
        <div id = "opening">
            <a href = "index.html">
                <h1 id = "logo"> Line After Line </h1>
            </a>
        </div>

        <div id = "navi">
            <ul>
                <li> Read </li>
                <li> Write</li>
                <li> Review </li>
                <li> Donate </li>

            </ul>
        </div>
    </div>


    <div id = "updates">
        <h4>Updates</h4>
        <ul>
            <li> number one blah blah blah blah blah hahahahaahah </li>
                </br>
            <li>number two blah blah blah </li>
        </ul>       
    </div>  

    <div id = "story">
        <a href = "blockOne.html">
            <div class = "storyblocks" id = "blockOne" >
                <p> Hello I this is a test block </p>
            </div>
        </a>

        <div class = "storyblocks" id = "blockTwo"></div>
        <div class = "storyblocks" id = "blockThree"></div>
        <div class = "storyblocks" id = "blockFour"></div>
        <div class = "storyblocks" id = "blockFive"></div>
        <div class = "storyblocks" id = "blockSix"></div>
    </div>

    <div id = "footer">
        <ul>
            <li> Home </li>
            <li> A Message From Chung</li>
            <li> Contributors </li>
            <li> About </li>
            <li> Contact </li>

        </ul>
    </div>


</body>

CSS：

    *{
    margin: 0px;
    padding: 0px;
    }
    ul{
    list-style-type: none;
    }

    body{
    background-color: white;    
    }

body a {
    text-decoration: none;
}

#top{
    background-color: black; /*use to see div area*/
    height:75px;
    margin-bottom: 1.5%;
    padding: 5px;
}

/*div surrounding the Logo */
#opening{   
    margin-left: 100px;
    width: 300px;
}

#logo{
    color: white;
    font-family: verdana;   
    float:left;
    margin-top: 15px;
}

#navi{
    /*background-color: red;*/
    width: 1100px;
    left: 200px;
    margin-top: 20px;
    margin-right: 100px;
    position: relative;

}

#navi ul li {
    font-weight: bold;
    color: white;
    display: inline;
    text-decoration: none;
    font-family: Calibri;
    font-size: 26px;
    margin: 0px 60px 0px 60px;

}



#updates{
    /*background-color: blue; /* use to see div area */
    color: #6D8582 ;
    font-family: verdana;
    margin-left: 5%; /*100px*/
    margin-bottom: 10px;
    height: 600px;
    width: 300px; 
    border-right: thick solid #6D8582;
    float: left;
    position: relative;


}

#updates h4 {
    text-align: center;
    padding: 10px;
}

#updates ul {
    margin-left: 20px;
    list-style-type: none;
}


#story , #mainStory{
    /*border: thin solid black;*/
    /*background-color: red;*/
    float: right;
    margin-left: 27%;
    margin-bottom: 10px;
    position: absolute;/* relative*/
    width: 1145px;
    height: 600px;
    overflow: auto;
    border-radius: 5px;

}

#mainStory {
    background-color: #F7F9FA;
    width: 1050px;
    margin-right: 4.5%;

}

#mainStory p {
    color: black;
    font-family: Calibri;
    font-size: 18px;
    padding-left: 50px;
    padding-right: 50px;
    text-indent:50px;
}

#mainStory h2{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.storyblocks{
    color:black;
    display:inline-block;
    line-height: 50px;
    margin: 5px;
    width: 200px;
    height: 200px;
    border-radius: 5px;
    text-align: center;
    vertical-align: top;
    opacity: 0.6;
}



#blockOne{  
    /*border: thick solid blue; /*delete later*/
    background-color: #2A9BB5;

}

#blockTwo{  
    /*border: thick solid green; /*delete later*/
    background-color: #17EB0C;

}

#blockThree{    
    /*border: thick solid yellow; /*delete later*/
    background-color: #F0F035;

}

#blockFour{ 
    /*border: thick solid red; /*delete later*/
    background-color: #F02E4E;

}

#blockFive{ 
    /*border: thick solid purple; /*delete later*/
    background-color: #DA41E8;

}

#blockSix{  
    /*border: thick solid green; /*delete later*/
    background-color: #FC62B2;

}



#footer {
    background-color: black;
    text-align:center;
    position: absolute;
    clear: left;
    height:34px;
    bottom: 0;
    width:100%

}


#footer ul li {
    color: white;
    text-decoration: none;
    display: inline;
    font-family: Calibri;
    font-size: 16px;
    margin-left:50px;
    margin-right:50px;
}

Answer 1

这是因为你有一个固定的宽度并向右浮动。带框的div正试图与浏览器窗口的右侧保持对齐，因为你不会让它调整大小，它会移动。将宽度设为百分比，或者不向右浮动并保留300px

的边距

Answer 2

实际上你的响应式设计存在问题。如果您没有修复任何项目（侧边栏或内容），您可以在这两个项目上使用百分比，例如：

  #nav {
    width:27%;
    display:inline-block;
    vertical-align:top;
    padding-right:1%;
    margin-right:1%;
    border-right:1px solid #ccc;
  }
  #content {
    width:70%;
    display:inline-block;
    vertical-align:top;
  }

如果你有一些固定的东西（比如边栏）你必须使用 css媒体查询并创建一些＆＃34;模式＆＃34;对于某些分辨率间隔（宽度）。

您有一个使用双方百分比大小的示例：http://jsfiddle.net/7Qpw6/

当我调整浏览器窗口大小时，中央div在网站上移动

2 个答案: