当页面重新调整大小时，CSS wordpress页脚小部件堆栈

Question

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

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

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

但是我添加了五个小部件区域，这些区域遍布我的页脚

一个|两个|三个|四个| 5

但是当重新调整页面大小时，窗口小部件区域会叠加在彼此之上

一

两个

三

四

五

其他所有内容都正确呈现。 我试过用{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;
}

Answer 1

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

site-wrapper {margin：auto;保证金：自动;宽度：1000px;}

需要

site-wrapper {margin：0 auto;宽度：1000px;}

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

Answer 2

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

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