CSS浮动侧边栏[关闭]答案

【问题标题】：css floating sidebar [closed]CSS浮动侧边栏[关闭]
【发布时间】：2013-02-19 15:32:18
【问题描述】：

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

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

我该如何解决这个问题？

谢谢！

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

【问题讨论】：

什么问题？？什么侧边栏？？你能把问题的快照放在红圈处吗？
对不起，您是：img199.imageshack.us/img199/8333/40472931.jpg 尝试调整页面大小，您会看到右侧边栏浮动。谢谢！
您的示例页面上的内容太多，无法帮助诊断问题。尝试将其简化为一个简单的测试用例，并将其放在像 jsFiddle 这样的网站上。查看您的标记，您似乎将 float 与 position 混淆（例如，您将其设置为使用绝对定位，在您的 div#content 上留出 34% 的边距），然后尝试浮动侧边栏.

标签： html css wordpress wordpress-theming

【解决方案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>

【讨论】：

【解决方案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;

}

【讨论】：

【解决方案3】：

不要从一开始就让你的内容宽度：100%。如果你这样做并添加 20% 的边距，当然没有什么可以放在那里让你的内容和你的侧边栏浮动：左边并取出所有的边距：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%}

【讨论】：

【解决方案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 对其进行了测试，并且运行顺利。

【讨论】：

举个例子：stackoverflow.com/questions/83073/…
老兄，我说的是 css 表.. 很容易解决他的情况.... 而不是投票，我想听听你的建议
我提出了我的建议。如果他将他的内容宽度设置为 100%，左右边距设置为 10% 或更多，那么当然就没有更多的东西可以放在那里了。