調整瀏覽器窗口大小時，中央div在網站上移動

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;
  }

如果您有固定的東西（比如說sidebar），則必須使用CSS媒體查詢並為一定的分辨率間隔（width）創建一些“模式”。

您有一個使用兩邊百分比大小的示例： http : //jsfiddle.net/7Qpw6/

調整瀏覽器窗口大小時，中央div在網站上移動

問題描述

2 個解決方案

解決方案1
1 已采納 2013-11-17 22:57:53

解決方案2
0 2013-11-17 23:04:51

調整瀏覽器窗口大小時，中央div在網站上移動

問題描述

2 個解決方案

解決方案1 1 已采納 2013-11-17 22:57:53

解決方案2 0 2013-11-17 23:04:51

解決方案1
1 已采納 2013-11-17 22:57:53

解決方案2
0 2013-11-17 23:04:51