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

Question

我正在使用Wordpress，21个孩子的主题。

我有一个问题，当我调整页面大小时，我所有的div都会移动。在坚持下来之后，我设法解决了这个问题，在我的身体上添加了一个包装器html标记。这会在调整页面大小时停止所有div的移动。

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

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

一|二|三|四|五

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

一

二

三

四

五

其他所有内容都会正确呈现。我已经尝试在页脚周围添加一个包装器，使用{ have : auto；have : auto；width: 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

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

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

Answer 2

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

site-wrapper{空白区:自动；空白区:自动；宽度: 1000px;}

需要的是

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

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