Question

我知道此帖已经发布过，但我倾向于认为我的网站（***）的问题不同。

网站看起来就像我想要的那样，当它是全尺寸时，但是当我去缩小浏览器尺寸时，文本（“关于国际商业公园......”及其下方）都与子导航重叠（深灰色）在它的左边。

我无法弄清楚发生了什么，我甚至不能在这里发布所有的HTML或CSS，因为其中一些是从我的wordpress博客主题中读取，并且该主题有大约20个不同的脚本链接。

我原本以为它与全长为12列的方式有关，灰色菜单占用2而文本占用9 - 当屏幕调整为奇数时会出现问题，但是现在对我来说没有多大意义。

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

Answer 1

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

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

改变这个：

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

对此：

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

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

Answer 2

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

[编辑] 实际上你可以尝试.span3和.span8？

Answer 3

我在窗口宽度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;
    }

Answer 4

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