下面的 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，这样做意味着边栏将不再支持容器...
有什么办法可以解决这个问题吗？谢谢
最佳答案
我刚刚发现的技巧是将您想要显示在右侧(标题)的元素定位到您希望它显示的方式。所以把它漂浮在那里。
然后添加一个固定的内部容器。
完整的工作示例: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>
关于html - CSS 固定边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6456750/