css - Wordpress 响应式小部件容器

Question

我遇到了一个非常具体的问题，主题开发人员已经 MIA。

我已经链接了一个关于问题所在的屏幕截图，我也会在此处尝试尽可能最好地描述它。如果需要更多信息，请告诉我，我会尽可能多地提供。

屏幕截图:http://tinypic.com/r/53le1l/8

我正在使用这个主题的一个相当修改的版本，但没有任何东西应该对主题的功能有影响:

http://www.themes.red-sun-design.com/?theme=lemonchili

如您所见 - 主页旨在显示小部件，每个小部件都在自己的容器中，而不是自定义页面布局(我们忽略了顶部 slider ，因为这不是问题)。主题中包含的小部件工作得很好，无论显示什么内容，大小都正确。

主页层结构是(从后到前):背景图片-->侧边栏/菜单和页面背景-->页面内容( slider 和小部件)

问题是，对于第三方小部件/插件和几乎所有交互式内容，这些容器无法正确展开并最终导致大部分内容不可见。

我正在使用插件 EventON (www.myeventon.com)，如果一个月有 2 个事件，如屏幕截图所示，它显示正常。 (注意:当单击/选择一个事件时，会弹出一个带有事件信息的灯箱 - 这不是问题)但是如果一个月有 2 个以上的事件，该框会调整大小以显示信息，但不会调整大小以适应其他所有内容在页面上。

如果您查看原始主题演示，每个框的每个小部件之间都有间距。

当您查看屏幕截图时，您会看到间距消失了，并且额外的事件(我假设)显示在 eventON 小部件下方的小部件下方。

我需要的是让每个容器都响应每个容器中显示的内容，而不管页面上的位置如何，同时保持每个小部件容器之间的间距相同。此外，实际的页面背景也需要扩展以满足内容，这似乎并没有发生。

我已经尝试了大约一个星期的修复，但完全卡住了。
所有这些都有意义吗 - 如果这令人困惑或者如果我没有正确解释它，请告诉我。

谢谢。

Answer 1

模板的设计非常僵硬，因为每个内容 div 部分(营业时间、最新图片、特价午餐、下一个事件、最新消息和关于)都绝对定位在容器 div 中，据我所知，溢出内容甚至隐藏在主要内容部分的底部。

以 Red Sun Themes 为例:你是对的，“最新图片”部分(你有插件的地方)溢出的内容显示在“下一个事件”部分下方。

1. 一个快速的解决方案是为“最新图片”div(这是包含您的插件的那个)提供比“下一个事件”更高的 z-index。这样，它将显示在“下一个事件”的顶部，而不是在其下方。幸运的是，该插件并没有溢出太多。请记住为列中的所有 3 个 div 提供一个 z-index。例子:z-index:10;对于“最新图像”，z-index:9；对于“下一个事件”，和 z-index:8；对于底部的“关于”div。

2. 接下来调整 div 的高度，以便始终为插件留出足够的空间。最小宽度可能效果很好。

3. 然后将“下一个事件”向下移动几个像素，这样“最新图像”的溢出就不会与顶部重叠。您可能还需要将“关于”向下移动。

4. 一旦您将其他 2 个 div 向下移动，底部的 div 可能会推过容器底部，其底部内容可能会被隐藏。一种解决方案是通过减小字体大小/填充来降低 div 的高度...另一种解决方案是增加直接位于容器 div 下方的主 div 的高度。看起来高度也在 html 代码中。

5. 注意:从这一端看来，模板在 html 代码中包含 div 样式，因此您可能必须在那里进行调整(z-index、顶部定位)。

另一种解决方案是在“最新图像”部分添加一个滚动条(添加宽度和溢出:自动；)，这样当插件溢出时，就会有一个滚动条。但是内容区域会受到滚动条大小的影响。