Question

首先看一下这个网站：http://irismediainfo2.lili.de/spip.php?article4924

在我的屏幕上，此屏幕截图如下所示：chrome - full window - desktop resolution: 1440x900 我想大多数人看起来会有所不同，但那是问题的一部分......

带有灰色边框的主div位于id =“page”的另一个div中。

    #page {
        width: 560px;
        margin: 50px auto 0px auto;
        position:relative;
        }

我创建了一个id =“toolbar”的新div，它看起来像是#page-div，但它不会随页面滚动。在我上面链接的网站上你可以看到#toolbar是一个虚拟框（带有一些Text的灰色）。

目前我在#toolbar中使用position:fixed。

当我将它放在#page的一侧，以便它看起来像它附加到它，我调整浏览器窗口的大小......两个div不会以相同的方式移动，因为#page的位置是从中间（按边距：自动）和#toolbar的位置是从浏览器窗口侧面计算的（按位置：固定）。因此，它不再适用于任何其他窗口。

我试图让#page浮动，让#toolbar出现在一边但是会破坏#page的“margin：auto”，所以它不再居中了。

我也试过

#toolbar {
    position: fixed;
    center: 0px;  }

因为我希望有一种方法可以从中心计算position:fixed的位置。

没有任何效果，我希望你知道一个解决方案。实际上我想要的东西是：

    #page {
        width: 560px;
        margin: 50px auto 0px auto;
        position:relative;  }

    #toolbar {
        position: fixed;
        center: 0px 280px 0px 0px;  }

我想用最少的代码和资源来做这件事，因为我不想因为一个小工具栏而使加载速度变差。

如果您需要我的css或html中更具体的代码，请告诉我。我希望目标和问题是明确的。

Answer 1

所有你需要的是一个wrapper-div，它将整个块居中并在那之后对工具栏进行algin，因为你的#page在每个视口中都有一个固定的宽度。

HTML：

<div class="wrapper">
    <div id="toolbar">
        content
    </div>
</div>

CSS：

#toolbar {
    height: auto;
    padding: 10px 20px 10px 15px;
    background-color: rgba(170, 170, 170, 0.5);
    border: 1px solid #AAA;
    border-radius: 0px 5px 5px 0px;
    text-align: center;
    margin: 0px auto 0px 279px;
}
.wrapper {
    position: fixed;
    top: 30%;
    left: 50%;
}

位置问题：固定和响应/自适应布局

1 个答案: