css - 在我的网站上放大时，div 的移动-6ren

css - 在我的网站上放大时，div 的移动

转载作者：行者123 更新时间：2023-11-28 11:22:09

25

4

我是 HTML 和 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;
    }

最佳答案

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

无论如何你应该删除 <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% 这样的百分比。 .

关于css - 在我的网站上放大时，div 的移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21487040/

25

4

0

文章推荐： javascript - 在 console.log 中打印动态 DOM 数据

文章推荐： ios - 如何以编程方式更改 UINavigationBar 高度？

文章推荐： css - 混合 float 和绝对定位问题

java - Android 在 Canvas 上操作图像 - 使用触摸、移动、放大 - 放大/缩小、缩放
我正在开发这样的摄影应用程序: https://play.google.com/store/apps/details?id=com.photo.editor.collage.maker.photobl
QTableView 放大/缩小
我正在尝试创建一个可以像在 Excel 中一样放大和缩小的 QTableView。此处提出了类似的问题:Zooming function on a QWidget 但是，我在 PyQt 而不是 C
delphi - 放大 TVVirtualStringTree
我想找到放大/缩小 TVirtualStringTree 的“最佳方法”。 “放大”的意思是模仿放大镜。必须通过优先使用 TVirtualStringTree 控件中专门用于此目的的属性/方法来理解
emacs 放大/缩小
有没有办法在emacs上放大和缩小(动态改变字体大小，相当流畅)？最佳答案尝试 C-x C-+ 和 C-x C--；即 Control-x Control-减号/Control-再加上。在一个组
javascript - 放大/缩小时传单标记移动
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。浏览网页后，解决方案似乎是 iconAnchor
javascript - 放大/缩小时传单标记移动
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。浏览网页后，解决方案似乎是 iconAnchor
java - 放大 Slick2D
我正在开发一款非常低分辨率的游戏，我需要放大它才能看到。我知道我可以使用 Graphics.scale(float x, float y) 但我想放大到中心。如何缩放中心的图形？有没有更简单的方法来制
c# - 放大/缩小时Unity相机平移
我有这种方法可以向前/向后和向左/向右平移相机。我不确定为什么，但是是什么导致相机在靠近地形放大时移动得很好，但在缩小时移动得非常慢？这是我平移相机的方式: void CameraPan(){
android - 放大 ViewFlipper
我正在尝试像这样进行缩放:zoom the imageview on the double click in viewflipper in android 我尝试将该代码改编为我的项目，但它不起作用.
javascript - 放大/缩小时的视点大小
$(window).height() 获取页面加载时窗口的高度。但是，在放大/缩小时，我想要新的视点高度。这可能吗？它可以很好地调整普通浏览器的大小，但我想在移动设备上放大/缩小不会触发 $(win
jquery - 放大/缩小时如何保持图像和按钮之间的比例
我正在尝试制作一个显示图像、 block 文本和按钮的面板，与下一个模型上显示的面板保持相似的比率，无论页面大小/缩放比例是多少。我首先尝试使用横写文本的图像(即不对文本、图像和背景使用不同的部分或
javascript - 放大，缩小html中的功能
Blockquote 大家好，请问是否可以在此代码中添加放大、缩小功能？我对 html 很陌生。任何帮助将不胜感激。 Career Center
javascript - 放大/缩小与更改分辨率相同吗？
我有一个由 3 个元素组成的搜索栏。首先 a 保存从下拉列表中选择的值。第二个清除选择的元素第三个供用户在下拉菜单之间切换。我的问题 - 当我缩放超过 100% 时，img 和按钮元素变大了一
html - 放大/缩小时页脚未对齐
我目前遇到网站页脚的问题。当以 100% 大小(正常大小)处理时，页脚对齐得很好。但是，当我调整它的大小时，它完全不对齐并位于左侧，它需要保持居中。屏幕截图: 相关 CSS: /* Dark bl
javascript - 放大 - 缩小不能正常工作
我实现了 3 个按钮来允许用户放大、缩小和返回到默认大小。脚本可以进行放大和缩小，但我还有 2 个问题无法解决。第一个问题: 每次放大时，要缩放的图像仍然到达我的窗口的限制，当图像左右没有任何空间
html - 放大/缩小时如何使阴影框保持在同一个位置？
即使我在网页上放大或缩小，我也试图让 shadowbox 保持在同一个地方。我尝试以百分比而不是像素为单位来制作尺寸，但我不知道应该使用哪种属性组合。这是我想要实现的结果:来自这里的外部阴影框效果h
ios - 放大 ScrollView
我有点困惑。我按照 Apple 的建议放大 ScrollView ，但没有任何反应。代码: import UIKit import SpriteKit class ScrollViewControl
html - 放大/缩小时如何避免标题甚至其他容器弄乱？
我正在尝试通过导航实现类似 Bootstrap 的 header ，但我刚刚发现当我缩小窗口时， header 内的内容变得困惑并且 header 也最小化而不是保持相同的大小。我已经在页眉上使用了
ios - 放大 UITextField
我正在开发一个包含许多 UIView 的 iOS 应用程序。 UINavigation 用于在这些 View 之间导航。我的一个 UIView 包含 UITextField。我的问题是，当我缩放时，
python - pyplot 放大
我正在尝试从 FITS 文件中绘制一些数据，我想知道是否有人知道如何关注绘图轴的某些区域？下面是一些示例代码: import pyfits from matplotlib import pyplot

首页

博学

6Ren·AI

商城

css - 在我的网站上放大时，div 的移动