我试图将#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的尺寸以使其在演示中更清晰]

最佳答案

您可以为主体添加最小宽度。通过将其添加到样式表中:

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;
}

关于html - CSS中居中的div,但不要离开左侧导航,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37429183/

10-09 23:52
查看更多