Question

我试图将#content div`` on a page that also has a position:absolute #nav放在左侧。此#nav从页面左侧出现约400px（占<body> margin）。

以下是divs：

的居中代码

#nav{
    position: absolute;
    display: inline-block;
    width: 350px;
    height: 800px; 
}

#content{
    position: absolute;
    display: inline-block;
    left: 0;
    right: 0;
    margin: auto;
    width: 600px;
    height: 1000px;
    border: solid;
    border-width: 1px;
}

这很好用，除非那样，窗口变得很窄，在这种情况下#content滑过#nav。有没有办法让#nav在页面上居中，相对于窗口大小，但是即使窗口变小，它仍然可以限制它可以移动多远？

编辑：请参阅这里的jsfiddle演示：jsfiddle.net/b2bcofyd/1/#&togetherjs=gti1uzDgxF [我已经稍微修改了div的尺寸，使其在演示中更加清晰]

Answer 1

您可以为身体添加最小宽度。将其添加到样式表中：

body {
   min-width: 950px; /*350 + 600*/
}

这样，当窗口小于950px时会出现滚动条;

作为替代方案，您可以将内容和导航包装在一个div中，然后将该div放在中心。

<div id="wrapper">
   <div id="nav"> </div>
   <div id="content"> </div>
</div>

#wrapper {
   width: 950px;
   margin: 0 auto;
}
#nav {
   float: left;
   width: 350px;
}
#content {
   float: left;
   width: 600px;
}

中心div在css但保持离开导航

1 个答案: