个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 14:19:26 27 4
gpt4 key购买 nike

当我调整浏览器窗口大小时，我的中心 block 一直向左移动

正常:

http://imgur.com/b2AVkUx

调整浏览器窗口大小后:

http://imgur.com/mJq6AuO

所以我设法弄清楚如何在调整大小时保持导航和页脚相对不受干扰，但我似乎无法弄清楚如何处理正文，请帮忙？

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

最佳答案

是因为你有一个固定的宽度和 float 权利。您的带有框的 div 试图与浏览器窗口的右侧保持对齐，并且因为您不会让它调整大小，所以它会移动。要么将宽度设为百分比，要么不向右浮动并留有 300px 的边距

关于javascript - 当我调整浏览器窗口大小时，中央 div 在网站周围移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20037233/

27 4 0
文章推荐： javascript - html5 Canvas 背景图片
文章推荐： html - OpenLayers Hello World 示例不适用于 HTML5？
文章推荐： html - 为什么标准规则必须是最后？
文章推荐： javascript - Jquery 移动干扰 javascript 填充选择框
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com