我试图将#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/