html - CSS浮动侧边栏

Question

我的一个页面中的侧边栏区域存在 CSS 问题，您可以在此处看到：[单击此处]

我已将 margin-top 更改为 –2470px，因为它目前是显示侧边栏的唯一方法。但是，一旦您调整窗口大小，它就会到处浮动。

我该如何解决这个问题？

谢谢！

编辑：现在整理好了！谢谢大家！

Answer 1

您需要将侧边栏放在您的#container div 中，与#content div 处于同一级别，并为两者应用“float:left”和宽度，您可以在 css 框架（如 bootstrap 或 960gs）中看到它

<div id="container">
     <div id="content"></div>
     <div id="sidebar">your sidebar here</div>  
</div>

Answer 2

侧边栏“#primary”应该在“#container”内，没有顶部边缘，所以侧边栏和“#content”现在是兄弟，然后你可以使用你已经做过的“#content”和“#primary”左侧的浮动侧边栏。

body.single-property #container #content { 
  margin: 0; width: 68.4%%;
  float:left
}

body.single-property #primary.widget-area {
  float: right;
  margin-right: 70px;
  width: 16%;
}

body.single-property #container {
  margin: 0 -26.4% 0 0;
  width: 100%;
  min-width: 960px;

}

Answer 3

不要从一开始就让你的内容宽度：100%。如果你这样做并添加 20% 的 margin-right 当然没有更多的东西可以放在那里 让你的内容和你的侧边栏浮动：left 并取出所有的 margin:20% ar 那里是什么。这是一个基于您所拥有的示例：

<div class="main">
<div class="content"></div>
<div class="primary"></div>
</div>

.main{width:100%;}
.main > div{float:left}
.main .content{width:70%:}
.main .primary{width:30%}

Answer 4

我建议你从你的块中删除所有floating 属性并使用 css 表来获得一个流畅和简单的解决方案：

#main {
    display: table;
    padding: 0.5em 15px 0;
}

body.single-property #container {
    display: table-cell;
    width: 80%;
}

body.single-property #primary.widget-area {
    display: table-cell;
    width: 20%;
}

请记住从元素中删除所有浮动属性，甚至从它们的子块中删除。我使用firebug对其进行了测试，并且运行顺利。