0

我正在使用 Wordpress，二十一岁儿童主题。

我有一个问题，当我调整页面大小时，我的所有 div 都移动了。在坚持不懈之后，我设法通过在我的 body html 标记周围添加一个包装来解决它。当页面调整大小时，这会阻止所有 div 移动。

#site-wrapper{margin: auto; margin: auto; width: 1000px;}

但是，我添加了五个贯穿我的页脚的小部件区域

一 | 二 | 三 | 四 | 五

但是当页面被调整大小时，小部件区域堆叠在一起

一

二

三

四

五

其他一切都正确渲染。我尝试使用 { margin: auto; 在页脚周围添加一个包装器。边距：自动；宽度：1000px；}，这不起作用小部件仍然堆栈我也尝试相对/绝对定位到小部件项目本身，并且包装器没有成功。我认为这与

    float: left;

在小部件项目上，但我看不到解决方法？希望有人可以指导我正确的方向！

在此先感谢，我下面的小部件项目的 CSS 如下

/* Footer Widget Areas */
#supplementary {
border-top: none;
width: 80%;
padding: 1.625em 7.6%;
overflow: hidden;
}

/* Three Footer Widget Areas */
#supplementary.two .widget-area {
float: left;
margin-right: 2.7%;
width: 17.78%;
}
#supplementary.two .widget-area + .widget-area {
margin-right: 0;
}

/* Three Footer Widget Areas */
#supplementary.three .widget-area {
float: left;
margin-right: 2.7%;
width: 22.18%;
}
#supplementary.three .widget-area + .widget-area + .widget-area {
margin-right: 0;
}

#supplementary.four .widget-area{
float: left;
margin-right: 3.7%;
width: 22.18%;
}

#supplementary.four .widget-area + .widget-area + .widget-area {
margin-right: 0;
}

#supplementary.five .widget-area{
float: left;
margin-right: 2.9%;
width: 16.7%;
}

#supplementary.five .widget-area + .widget-area + .widget-area + .widget-area +   .widget-area+ .widget-area{
margin-right: 0;
}
4

2 回答 2

0

我看到的第一件事就是这行代码

站点包装器{边距：自动；边距：自动；宽度：1000 像素；}

需要是

站点包装器{边距：0自动；宽度：1000 像素；}

接下来要尝试的是使用整数百分比，浏览器不喜欢分数，而是倾向于四舍五入...尝试将宽度调整为总和等于或小于 100 的整数。

于 2013-01-07T19:30:55.670 回答
0

这不是错误。这是设计使然。WordPress 2011 是一个响应式主题，旨在在任何尺寸的设备上看起来都不错。较小的设备没有空间在主要内容旁边呈现小部件，因此该主题以及大多数其他响应式主题将它们移动到小屏幕上的主要内容下方。

覆盖此功能似乎非常违反直觉。如果您真的不想要响应式设计（在当今时代，您应该想要一个），那么您可能应该选择不响应式的父主题。

于 2013-01-07T19:33:06.287 回答