DIV 与浏览器调整大小重叠

Question

我知道这已经 posted 了，但我倾向于认为我的网站 (***) 的问题是不同的。

该网站在全尺寸时看起来和我想要的一模一样，但是当我将浏览器尺寸缩小时，文本（"ABOUT INTERNATIONAL PARK OF COMMERCE.." 及以下）都与子导航重叠（深色）灰色）在它的左边。

我不知道发生了什么，我什至无法 post 所有 html 或 css ，因为其中一些是从我的 wordpress 博客主题中读取的，并且该主题链接了大约 20 个不同的脚本。

我最初认为这与全长是 12 列有关，灰色菜单占 2，而文本占 9 - 当屏幕调整为奇数时，这就成了问题，但现在这对我来说没有多大意义。

这是响应式 div 的常见问题吗？

Answer 1

发生这种情况是因为 .span2 的宽度大于您在样式表中指定的宽度。例如，在屏幕尺寸 1199px 下，您将 .span2 宽度设置为 width:140px;，而实际宽度为 196 像素。

Answer 2

当您将测量值设置为固定数量（例如像素）时，要让您的 div 保持良好的响应可能会很棘手。相反，请尝试使用百分比。对于字体，ems 很棒，因为您可以在媒体查询中重置正文大小文本并相应地缩放所有内容。

例如，您可能要考虑删除最小宽度以消除重叠问题。

改变这个：

.whatwhat {
  min-width: 400px;
  overflow: auto;
  float: right;
 }

为此：

.whatwhat {
  overflow: auto;
  float: right;
}

调整大小时，文本将不再排在 div 之外。

Answer 3

您在 .span2 中的 table 有一个 css min-width: 170px，这就是 .span2 看起来与 .span9 重叠的原因。修复 table 宽度会有所帮助。例如给它一个宽度 100%。

[编辑] 其实你可以试试 .span3 和 .span8?

Answer 4

我在 window 宽度 768px - 979px 上发现了重叠，您可以修复您的媒体查询之前，

@media (min-width: 768px) and (max-width: 979px)
.span9 {
width: 538px;
}

您可以使用下面的css

   @media (min-width: 768px) and (max-width: 979px)
    .span9 {
    width: 470px;
    }

DIV overlap with browser resize