调整页面大小时 CSS wordpress 页脚小部件堆叠

Question

我正在使用 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;
}

Answer 1

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

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

需要

site-wrapper{边距：0 自动；宽度：1000px;}

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

Answer 2

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

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