需要居中div但在到达某个左侧位置时停止以允许侧面菜单的空间

Question

我可能会忽略这个简单的答案。我的内容位于主页面上的div容器中。我希望它是水平居中的，但是当浏览器缩小到小时它会重叠我的侧面菜单。我希望它在达到200px时停止向左移动。

它目前的中心是负宽度为宽度的一半（-350px），然后定位为50％。

我的css就在这里

纸张{

position:absolute;
z-index:6;
overflow: hidden;
visibility: visible;
float: left;
left: 50%;
margin-top: 0px;
padding-top: 0;
padding-right: 0;
padding-bottom:200;
padding-left: 0;
background-color: #000;
height: 900px;
width: 700px;
margin-left: -350px;

}

任何帮助将不胜感激

欢呼声

Answer 1

使用：margin:0 auto;而不是绝对定位对容器进行居中，然后应用200px的左右填充; （padding: 0 200px;）。

这将使容器居中，并在最小化浏览器窗口时在两侧留出200px的空间。

Answer 2

您必须重新编写HTML和CSS以实现它。

<div id = "sidebar"></div>
<div id = "content">
    <div id = "content_inner"></div>
</div>

使用新的HTML，您还需要新的CSS

#sidebar{
float:left;
width:200px;
}

#content{
padding-left:200px;
}

#content_inner{
    margin:0px auto; /* This will center your box in the parent box */
    width:700px;
}

在某个时刻，您仍然可能不得不放弃您的设计，您无法阻止某人在100px宽屏幕中查看您的网站。您应该尝试优化页面的最小尺寸（实际上，大多数网站都是针对960像素显示器进行开发或更宽）

您可能还可以在此处找到更多相关信息： http://css-tricks.com/the-perfect-fluid-width-layout/

Answer 3

这第一点更多是关于解决CSS问题的一般性评论。如果您为firefox安装firebug附加组件，那么无论何时预览页面，您都可以实时编辑css和内联样式，以便以您喜欢的方式查看哪些属性会影响您的UI。在这种情况下，您需要加载页面，检查“纸张”div，并尝试更改填充左侧，位置，边距等属性。

在这种情况下，您的问题与此div是浮动的事实有关，因此它可以与其他内容重叠。如果您的侧边菜单也是浮动的（左侧），那么它将不会与任何其他浮动：左侧元素重叠。另外，因为你正在使用overflow：hidden，所以它不会像往常一样包裹在菜单下面。

最后，在OP中并不清楚，但如果您正在谈论的菜单位于右侧，则将两者都浮动：正确。