0

我忽略了这个可能有一个简单的答案。我的内容在主页上的 div 容器中。我希望它水平居中，但是当浏览器缩小到很小时，它会与我的侧菜单重叠。例如，我希望它在达到 200 像素时停止向左移动。

它目前以宽度为一半（-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;

}

任何帮助将非常感激

干杯

4

3 回答 3

0

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

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

于 2011-01-10T13:21:15.007 回答
0

你将不得不重新设计你的 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;
}

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

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

于 2011-01-10T13:21:23.677 回答
0

第一点是关于解决 CSS 问题的一般性评论。如果您为 firefox 安装 firebug 插件，那么无论何时预览页面，您都可以实时编辑 css 和内联样式，以查看哪些属性以您喜欢的方式影响您的 UI。在这种情况下，您将加载您的页面，检查“纸张”div，并尝试更改诸如 padding-left、position、margin 等属性。

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

最后，在 OP 中并不清楚，但如果你正在谈论的菜单在右边，那么让两者都浮动：对。

于 2011-01-10T13:21:29.953 回答