如何考虑用户不同分辨率使两个div居中

Question

我是 css 新手，我在将两个 div 居中时遇到困难。我的屏幕分辨率为 1920 x 1080，如果我网站的访问者分辨率较低，则使用边距不会使两个 div 居中。我知道它会移动，对吗？

详细信息：

请在这里看看我的问题---> http://i1204.photobucket.com/albums/bb409/bendaggers/help.png

• Div id = Topwrapper
• Div id = MainWrapper：保存容器和侧边栏（灰色）
• Div id = Container (黄绿色)
• Div id = Sidebar (蓝色)

我对 Topwrapper 没有任何问题，正如你所看到的，它位于中心位置，但我最大的问题是容器和侧边栏。我无法将它与 Topwrapper 对齐。你能帮我编码吗？另一件事，你能考虑一下屏幕分辨率吗，据我所知，我的Mainwrapper代码会调整它的宽度，因为min-width=1000px;

如果您认为我的代码有更好的想法，请随时修改它。

    <div id="TopWrapper"></div>
    <div id="MainWrapper">

        <div id="Content"></div>
        <div id="Sidebar"></div>

    </div>

#MainWrapper {
    height:3000px;
    min-width:1000px;
    background-color:#CCC;

}

#TopWrapper {
    background-image:url(images/topwrapper.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    min-width:100%;
    height:77px;
    margin: 0;
}

#Content {
    height:3000px;
    min-width:630px;
    background-color: #0F0;
    float:left;
    margin-left:150px;
    display:inline;


}

#Sidebar {
    height:3000px;
    min-width:350px;
    background-color: #00F;
    margin-left:20px;
    float:left;
    display:inline;
}

提前非常感谢您！

Answer 1

您可以设置现有 div“#MainWrapper”的宽度，以补充两个 div 中已有的内容，确保它们之间有空间，并为两侧的边距留出空间（可能比两个 div 的总和宽 30px）两个 div），然后给出“margin-left:auto;”和“右边距：自动；”到 div #MainWrapper 以便它居中。然后，您需要设置“body”标签的样式，为其提供您想要的颜色。

Answer 2

试试这个：

#MainWrapper {
    height:3000px;
    width:1000px;
    background-color:#CCC;
    margin:0 auto;

}

#TopWrapper {
    background-color:#000000;
    min-width:100%;
    height:77px;
    margin: 0;
}

#Content {
    height:3000px;
    width:630px;
    background-color: #0F0;
    float:left;


}

#Sidebar {
    height:3000px;
    width:350px;
    background-color: #00F;
    margin-left:20px;
    float:right;
}

如果这不是您要找的，请告诉我。我很高兴与您合作。

哦，如果你想要背景是某种颜色，只需添加：

    body {
    background-color:#CCC; /* or whatever colour you like */
}

Answer 3

这是另一种解决方案，将您的内容包装到另一个宽度为 1000px 的 div 中，然后设置 margin:0 auto;这意味着它在页面上居中，并且可以适应任何屏幕分辨率

这是具有新样式 ID 内容包装器的 CSS 和 HTML

#MainWrapper {
    height:3000px;
    min-width:1000px;
    background-color:#CCC;
}
#TopWrapper {
    background-image:url(images/topwrapper.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    min-width:100%;
    height:77px;
    margin: 0;
}
#Content {
    height:3000px;
    width:630px;
    background-color: #0F0;
    float:left;
    display:inline;
}
#Sidebar {
    height:3000px;
    width:350px;
    background-color: #00F;
    margin-left:20px;
    float:left;
    display:inline;
}
#content-wrapper {
    margin:0 auto;
    width:1000px;
}

<div id="TopWrapper"></div>
<div id="MainWrapper">
  <div id="content-wrapper">
    <div id="Content"></div>
    <div id="Sidebar"></div>
  </div>
</div>