html - 水平调整大小时样式困惑

Question

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

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

这是 wordpress Geotheme。

谢谢。

“我只是用不同的方式修复了它。我发现 @media(max-width:800px) 应用了一组不同的样式，这些样式导致了问题，无论如何谢谢。”

Answer 1

您在内部 div 中有一个 margin:auto on。这意味着 div 将始终尝试填充空间。

在标题上添加 overflow:auto。 在正确的位置移除 margin: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 .