Html DIV更改页面缩放上的位置_Html_Css_Web

Html DIV更改页面缩放上的位置

html css web

Html DIV更改页面缩放上的位置,html,css,web,Html,Css,Web,在阅读了有关stackoverflow的类似问题后，似乎没有什么能解决这个问题。给你我在页面顶部有一个DIV，用作菜单。尺寸为1920像素×50像素。它的CSS代码是： #top_bar{height:50px; width:1920px; margin:0px auto; background:url("img/top_bar.png"); left:0px; top:0px; position:relative;} #wrapper{width:960px; margin:0px au

在阅读了有关stackoverflow的类似问题后，似乎没有什么能解决这个问题。给你

我在页面顶部有一个DIV，用作菜单。尺寸为1920像素×50像素。它的CSS代码是：

#top_bar{height:50px; width:1920px; margin:0px auto;
background:url("img/top_bar.png"); left:0px; top:0px; position:relative;}

#wrapper{width:960px; margin:0px auto; overflow:hidden; left:0px; top:0px;
position:relative;}

然后，在960px宽且居中的目录下有一个content#wrapper DIV。它的CSS代码是：

#top_bar{height:50px; width:1920px; margin:0px auto;
background:url("img/top_bar.png"); left:0px; top:0px; position:relative;}

#wrapper{width:960px; margin:0px auto; overflow:hidden; left:0px; top:0px;
position:relative;}

当我放大页面时，内容#wrapper DIV保持在正确的位置（居中），但#top#u bar DIV向右移动

页面的HTML代码为：

<body>

<div id="top_bar">
    (...menu links, etc)
</div>

<div id="wrapper">
    (...page content)
</div>

</body>


（…菜单链接等）
（…页面内容）

我正在为客户解决这个问题，因此任何解决方案都将不胜感激。提前感谢：）

它不会移动，看起来它移动是因为

1920px

的宽度远远超出了屏幕的边距。另一个分区要小得多

如果您希望两个div看起来相等对齐，则必须为它们提供相同的宽度

要实现居中定位，必须使用动态div

HTML:

如果放大一个大小固定的元素，它显然会变大。除非它比视口宽，否则它别无选择，只能向右扩展。

即使我将其更改为：位置：绝对；或位置：固定；即使我把它留白。有解决办法吗？谢谢。您应该使用浮动并在内联块中显示它们。谢谢@BuddhistBeast都显示：block；并显示：内联块；成功了。唯一的问题是，现在当我放大时，整个页面向左放大。有没有办法让它放大到中间，或者这就是所有可能的方法？这是可能的。。请给我一点时间为您创建小提琴谢谢，但如果我这样做，当我放大时，整个页面仍会放大到左上角，而不是放大到中间。此外，当我放大时，顶部栏上的菜单项会环绕到新的一行，而不是停留在它们的位置。感谢页面现在放大到中间，但顶部栏的div仍然会向右移动或“剪切”。现在呢？这就是你想做的吗？