Question

在阅读stackoverflow上的类似问题后，似乎没有解决这个问题。这是......

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

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

然后我有一个内容#wrapper DIV，宽度为960px并且居中。它的CSS代码是：

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

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

页面的HTML代码为：

<body>

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

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

</body>

我正在为客户解决此问题，因此我们将非常感谢任何解决方案。提前谢谢你：）

Answer 1

它没有移动，它看起来只是因为1920px的宽度延伸超过了屏幕的边缘。另一个div要小得多。

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

Answer 2

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

<强> DEMO HERE

HTML：

<div class="side-pannel" id="left-pannel"></div>
<div id="container">
    <div class="two-item-column">
        <div class="item1 column-border-middle">1</div>
        <div class="item2 column-border-middle">2</div>
    </div>
</div>
<div class="side-pannel" id="right-pannel"></div>

CSS：

#container {
    position: relative;
    width: 88%;
    height: 580px;
    float: left;
}
.side-pannel {
    position: relative;
    width: 6%;
    height: 580px;
    float: left;
}
.two-item-column {
    position: relative;
    width: 100%;
    float: left;
}
.column-border-middle {
    border-right: 1px solid black;
}
.item1 {
    height: 288px;
    background: #ccc;
}
.item2 {
    height: 291px;
    background: #ccc;
    border-top: 1px solid black;
}

如果放大尺寸固定的元素，显然会变得更大。除非它比视口宽，否则它只能向右扩展。

DIV改变页面缩放的位置

2 个答案: