固定中心div旁边的div [英] Fixed div next to a centered div

问题描述

我有一个网页，其中有可滚动的内容。此内容包装在以页面为中心的#content内。
现在我想要一个导航栏向内容显示50px。

I have a webpage in which there is scrollable content. This content is wrapped inside #content, which is centered on the page. Now I want a navigation bar to appear 50px left to the content. This bar should have a fixed position (shouldn't scroll).

这是我到目前为止所尝试的：

This is what I have tried so far:

#nav {
position: fixed;
top: 50%;
margin-top:-200px;
left:15%;
background: #FFF;
width: 100px;
height:400px;
border-radius: 50px;
}


#content {
position: relative;
width: 800px;
margin: 0px auto;
padding-top: 100px;
}

这显然不是我想要的，因为现在nav是15％

Which is obviously not what I want, because now the nav is 15% from the left of the screen.

这是一张图片来说明我想要达到的效果。

Here's an image to illustrate what I want to achieve.

推荐答案

我已找到解决方案。

#nav{ 
left:50%; 
margin-left:-550px;
}

我刚刚给它左：50％内容宽度+ 50像素+导航栏的宽度。

I just gave it left:50% and a margin-left of half the width of the content + 50px + the width of the navigation bar.

这篇关于固定中心div旁边的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！