风格搞乱水平调整大小

Question

当我在800px以下水平调整页面大小时，它会破坏样式。

有人可以看看发生了什么吗？ 为什么会这样？

是wordpress Geotheme。

谢谢。

“我只是以不同的方式解决了这个问题。我发现@media（最大宽度：800px）正在应用一组不同的样式，这些问题引起了问题。”

Answer 1

您的布局基于花车，并且在调整大小时会被推下来。尝试给你的包装a：min-width：800px

Answer 2

你有一个保证金：在内部div中自动开启。这意味着div总是试图填补空间。

在标题上添加overflow：auto。 删除保证金：在正确的位置自动

设计本身......太复杂了。您应该真正简化它并将边距和放置内容的区域分开。

<div id="page_head" style="width:800px; margin:auto; margin-top:20px; border:1px solid black; height:100px; position:relative; padding-left:200px; box-sizing:border-box;">
     <div style="position:absolute; left:0px; top:0px; background-color:red; width:100px; height:100px;">Image</div>
</div>
<div id="page_content" style="width:800px; margin:auto; margin-top:20px; border:1px solid black; height:100px; position:relative;">

</div>
<div id="page_footer" style="width:800px; margin:auto; margin-top:20px; border:1px solid black; height:100px; position:relative;">

</div>

对此，如果添加和外部div，您还可以进一步控制它。 请参阅JsFiddle example。