Question

我不熟悉HTML＆amp; CSS并希望有人可以帮助我。我在这个页面有问题，内容没有固定到位，当我放大和缩小容器移动时。知道如何解决这个问题吗？不确定我应该使用什么布局来防止这种情况发生。感谢

        <body>
            <img class="img" src="http://i824.photobucket.com/albums/zz162/nathanial292/banner_zps45abd080.png">    
        <div id="header">    
        <h3 id="header h3">    
             <a href="index.html">Home</a> Servers <a href="http://shoppingcart-28745.safestorefront.com/Merchant/?p1=201298">Shop</a> <a href="forum.html">Forum</a> About Us Contact    
        </h3>    
        </div>    
        <div class="left">    
            <h1>Server Updates</h1>    
            <h2><span>Hello readers</span></h2>     
        </div>    
        <div class="right">    
            <a id="nabblelink" href="http://hydronetworks-forums.58422.x6.nabble.com/">HydroNetworks Forums</a>    
        <script src="http://hydronetworks-forums.58422.x6.nabble.com/embed/f1"></script>    
        </div>    
        <div id="footer">All Rights Reserved 2013  HydroNetwork</div>    
    </body>

    #header{    
        z-index: 1;    
        border-radius: 5px;    
        height: 50px;    
        width: 600px;    
        background-color: #585858;    
        border: solid #383838 6px;    
        position: absolute;    
        margin-top: 25px;    
        margin-left:640px;    
        min-width: 480px;    
    }
    .right{
        z-index: 1;    
        border-radius: 5px;    
        height: 600px;    
        border: solid #383838 6px;    
        width: 400px;    
        background-color: #585858;    
        position: relative;    
        margin-top: 120px;    
        margin-right: 50px;    
        font-family: Ebrima;    
        overflow:auto     
    }

    .left{    
        z-index: 1;    
        border-radius: 5px;    
        height: 600px;
        border: solid #383838 6px;    
        width: 600px;    
        background-color: #585858;    
        position: relative;    
        margin-top: 120px;    
        margin-left:150px;    
        margin-right: 750px;    
        text-align: center;    
        font-family: Ebrima;
    }

Answer 1

放大时，内容会向右和向下移动，因为您使用了像素值。

无论如何你应该删除 <body background= "http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png"> 来自您的HTML代码。

并将其添加到您的CSS代码中：

body{
     background: url(http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png);
     background-position: top center;
}

如果您不希望div在缩放时“移动”，则应使用width: 50%之类的百分比。

放大我的网站时div的移动

1 个答案: