0

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

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

它是wordpress Geotheme。

谢谢你。

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

4

2 回答 2

0

你有一个 margin:auto 在内部 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，您还可以进一步控制它。请参阅JsFiddle 示例。

于 2013-05-27T22:48:29.653 回答
0

您的布局基于浮动，并且在调整大小时它们会被下推。尝试给你的包装器 a: min-width: 800px

于 2013-05-27T22:45:02.183 回答