Html 样式在水平方向上混乱不堪

当我将页面水平调整到800px以下时，会弄乱样式

有人能看看发生了什么事吗？ 为什么会这样

这是wordpress的地理主题

多谢各位

---

“我只是用另一种方式修复了它。我发现@media（最大宽度：800px）应用了一组不同的样式，不管怎样，这些样式都会导致问题。”

您的布局基于浮动，调整大小时它们会被向下推。试着给你的包装一个：最小宽度：800px

你有一个空白：自动在内部div上。这意味着div将始终尝试填充空间

添加溢出：标题上的自动。 删除页边距：在正确位置自动

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

<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，还可以进一步控制它。

---

请看。

我非常感谢您的示例。好的。我认为这也是因为宽度的百分比。我查看了Geotheme的演示版。我可以尝试禁用百分比宽度样式。在这种情况下，您会发现。。很难。风格太复杂了。尝试通过添加一个类来简化它，该类将删除有问题的内容，并且只需自己动手即可。希望我能帮上忙：）我只是用另一种方式把它修好了。我发现@media（最大宽度：800px）应用了一组不同的样式，不管怎样，都是这些样式造成了问题。