Question

以下HTML创建了一个带有固定侧边栏的简单布局，但我想将侧边栏放在内容的右侧

请参阅代码段：

#container
    {
    	width: 1140px;
    	max-width: 98%;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	min-height: 100%;
    }
    #header
    {
    	position: fixed;
    	z-index: 20;
    	width: 180px;
    	padding-top: 100px;
    	text-align: right;
    }
    #maincontent
    {
    	padding-left: 220px;
    	padding-top: 100px;
    }

<!doctype html>
    <html lang="en">
    	<head>
    		<title>Test</title>
    		<link rel="stylesheet" href="master.css" type="text/css" />
    	</head>
    	<body>
    	
    		<div id="container">
    		
    			<header id="header">
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			</header>
    			
    			<div id="maincontent">
    				<div style="height:1280px;background:#333;"></div>
    			</div>
    		
    			<div style="height:100px;"></div>
    		
    		</div>
    	
    	</body>
    </html>

问题在于我需要在侧边栏（#header）上指定right，这样做意味着侧边栏不再尊重容器......

我有什么想法可以解决这个问题？感谢

Answer 1

我刚才发现的诀窍是将你想要出现的项目放在右侧（标题）你想要它出现的方式。所以把它漂浮在那里。

然后添加一个固定的内部容器。

完整的工作示例：http://jsfiddle.net/jupitercow/MjPC4/

所以，我更新了你的标题CSS：

#header
{
    float: right;
    z-index: 20;
    width: 180px;
    padding-top: 100px;
    text-align: right;
}
#header .inner {
    position: fixed;
    width: 180px;
}

HTML：

<header id="header">
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</header>

Answer 2

你是说这样的意思吗？请参阅http://jsfiddle.net/NGLN/fDxdj/。

提示：将标题重命名为侧栏...;）

但我不明白你的意思

这样做意味着侧栏WOULD NO LONGER尊重容器

因为position: fixed不尊重任何事情。不是你当前的样本，不是永远不会。它只尊重浏览器窗口，就像它应该的那样。

Answer 3

#header {
  float:right;
}

从#maincontent中删除那些巨大的填充，如果需要，修复#maincontent width。

CSS固定侧边栏

3 个答案: