CSS中的绝对列

Question

我想设计一个简单的博客，并使用Wordpress上的父主题(沙盒)来做到这一点。我想使用绝对列，到目前为止，我一直基于Dan Rubin的文章：http://24ways.org/2008/absolute-columns

我的问题是侧边栏不会像这里看到的那样向右移动：www.dearjasmina.com显然，我在这方面是新手，但任何建议都会有所帮助。这是目前为止的代码：

#header {
height: 60px;
}

#container div {
margin: 0;
}

#container {
position: relative;
}

#access {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}

#menu {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}

#wrapper {
width:800px;
margin:auto;
padding:10px;
background-color:#f2f2f2;
border:10px solid #fff;
text-align:left;
}

div div {
background-color:#E6E6E6;
margin-bottom:10px;
padding:10px;
}

div div div {
background-color:#DADADA;
}

.sidebar {
bottom: 10px;
position: absolute;
right: 10px
top:10px
width: 200px;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#content {
width: 530px;
}

body {
margin:0;
font-family:"helvetica neue",helvetica,arial,sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
color:#a1a1a1;
text-align:center;
}

h2 {
font-size:12px;
text-align:center;
}

p {
font-weight:normal;
text-align:left;
text-transform:none;
line-height:1.2;
}

Answer 1

你在这里尝试做什么有点不清楚，你有两个侧边栏：#primary和#sidebars。如果你想让它们并排出现，你必须分别调整它们的"right“属性。如果你想让它们一个接一个地出现，你必须知道其中一个的高度，并且它一定不能改变。

首先，您必须将div#wrapper的“位置”设置为相对。这将使您的div.sidebar元素相对于包含它们的div#wrapper元素设置它们的位置。

div#wrapper {
    position: relative;
}

如果没有在div#wrapper上设置position: relative，您的侧边栏将绝对相对于"body“元素定位自己。

现在，您已经为绝对定位的侧边栏设置了正确的参考系，您可以随心所欲地放置它们。目前，它们位于完全相同的位置和完全相同的宽度，这使得它们彼此重叠。这可能不是你想要的，试着设置一个210px的"right“属性。

div#primary {
    right: 210px;
}

现在，您将看到所有三列:您的内容、主要侧栏和次要侧栏。您的主要侧边栏可能会与您的内容重叠，所以您可以隐藏次要侧边栏，并将您的主要侧边栏移回“右: 10px"，或者将您的次要侧边栏设置在主要侧边栏的上方，因为它的内容看起来不是动态的，不会增长。

如果你正在学习CSS，你绝对必须安装Firebug，这样你才能在任何实时网站上检查和编辑CSS。Firebug

Answer 2

在.sidebar CSS中，您忘记了top:10px和right:10px行后面的分号：

.sidebar {
bottom: 10px;
position: absolute;
right: 10px
top:10px
width: 200px;
}

应该是...

.sidebar {
bottom: 10px;
position: absolute;
right: 10px;
top:10px;
width: 200px;
}

Answer 3

除了上面Dav的回答之外，除非我错了，否则您会希望将侧栏作为content的兄弟项包含在容器类中：

<div id="container">
  <div id="content"></div>
  <div class="sidebar"></div>
</div>