WordPress的響應部件容器

Question

我有一個非常具體的問題，我遇到了，主題開發者已經去了MIA。

我已經鏈接了問題的屏幕截圖，我會盡量在這裏儘可能最好地描述它。如果需要更多信息，請告訴我，我會盡可能提供。

擷取畫面：http://tinypic.com/r/53le1l/8

我使用這個主題的漂亮修改後的版本，但有什麼話要對主題的功能的影響：

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

正如你所看到的 - 主頁設計爲顯示小部件，每個都在自己的容器中，而不是自定義頁面佈局（我們忽略頂部滑塊，因爲這不是問題）。包含在主題中的小部件工作得很好，並且無論顯示什麼內容都可以正確調整大小。

主頁層結構爲（從後到前）：背景圖像 - >邊欄/菜單&頁面背景 - >頁面內容（滑塊和窗口小部件）

的問題是，與第三方小部件/插件和幾乎任何交互式內容，那些容器不能正確擴展，並最終導致大部分內容不可見。

我使用插件EventON（www.myeventon.com），如果一個月有2個事件，如screencap所示，它顯示正常。 （注意：點擊/選擇某個事件時，燈箱會彈出事件信息 - 這不是問題）但是，如果一個月有2個事件，該框會調整大小以顯示信息，但不會調整大小以適應其他所有事件在頁面上。

如果你看看原來的主題演示，每個方框之間都有間隔。

當您查看screencap時，您會看到間距消失，並且額外事件（我假設）顯示在eventON小部件下面的小部件下方。

我需要的是使每個容器都響應每個容器中顯示的內容，而不管頁面上的位置如何，同時保持每個容器容器之間的間距相同。此外，實際的頁面背景也需要擴展以滿足內容，這似乎不會發生。

我一直在試圖找到一個修補程序約一個星期，我完全卡住了。
是否所有這一切都有意義 - 如果這是令人困惑的，或者如果我沒有正確解釋它，讓我知道。

謝謝。

Answer 1

該模板有一個非常僵硬的設計，因爲每個內容div部分（小時，最新圖像，午餐特殊，下一個事件，最新和關於）絕對位於容器div內，並且據我所知，內容溢出甚至隱藏在主要內容部分的底部。

以紅色太陽主題爲例：您是正確的，「最新圖片」部分（您擁有插件的地方）中的內容溢出顯示在「下一個事件」部分的下方。

1. 一個快速的解決方案是讓「最新圖片」分區（這是握着你的插件之一）較高的Z-指數比「下一步」事件。這樣，它將顯示在「下一個事件」的頂部，而不是它下面。幸運的是，這個插件沒有溢出太多。請記住爲列中的所有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，頂部定位）。

另一種解決方案是添加一個滾動條（添加寬度和溢出：汽車;）到「最新圖像」部分，因此，當插件溢出，將有一個滾動條。但是，內容區域將受到滾動條大小的影響。