Question

此网站过去看起来很好，然后wordpress升级。没有其他变化。侧边栏以一列开始，然后分成两列。两列设置为两个div，一个向左浮动，一个向右浮动。它在Mac上的FF看起来很好，但就是这样。它在Mac上的Safari和PC上的主要浏览器上搞砸了。有关如何解决它的任何建议？

以下是完整网站，如果您想查看源代码：http://girlgonemom.com/

这是css：

#content {
border-right:2px solid #abcfcb;
margin: 20px;
width:630px;
float:center;
padding-right: 10px;
}
#primary {
float: right;
overflow: hidden;
width: 310px;
}
#secondary {
float: left;
overflow: hidden;
width: 150px;
}
#third {
float: right;
overflow: hidden;
padding-left: 5px;
width: 150px;
list-style-type:none;

}

Answer 1

我看不到third div。我想你评论过了吗？无论如何，你应该尝试以下......

尝试float third div左侧
更重要的是，减少secondary和third div。从5px开始，看看是否有效。

Answer 2

width: 310px;和#secondary中的#third代替他们拥有的width: 150px。

即使在那之后，仍然会对一些广告进行一些调整“问题”。但您可以将text-align: center; to your #secondary和text-align: left;添加到您的中学标题#secondary #text-17 h3

这就是修复它的原因：

#content {
border-right:2px solid #abcfcb;
margin: 20px;
width:630px;
float:center;
padding-right: 10px;
}
#primary {
float: right;
overflow: hidden;
width: 310px;
}
#secondary #text-17 h3 { text-align: left; }
#secondary {
float: left;
overflow: hidden;
width: 310px;
text-align: center;
}
#third {
float: right;
overflow: hidden;
padding-left: 5px;
width: 310px;
list-style-type:none;
}

不是真的有必要但是因为这很简单，所以增加了代码的例子：http://www.csspivot.com/R7CUE

编辑：之前没有考虑过一些事情......

编辑2：如果我能学会阅读其中一天。好吧，这个解决方案将使它成为您想要的一列。你还没知道：）

两列侧边栏无法正确呈现

2 个答案: