Question

对于此问题，您需要参考https://www.ashenglowgaming.com/的实时网站。

您需要手动调整浏览器的大小，以重现我观察到的有问题的行为。

因此说明了这个问题。有问题的红色框是我正在谈论的div。在前两个响应模式中，框表现良好。问题出现在第三种响应模式中：

当浏览器宽度为＆gt; 1024px，有问题的div表现良好 - 它以红色圈出：

然而，当浏览器宽度<＆lt; 1024px（响应模式），div的灰色边框可以跨越网站的其他区域。本质上，就像开放<div>标签被重新定位到html文档的开头一样。现在，div框也包含容器2，在原始图中。

有人可以帮我诊断并解决这个错误吗？

编辑1：澄清一下，所需的行为是红色框边界包含最近的帖子列表，没有别的。边框应仅包含此内容。绝对不应该扩散到容器2中。

编辑2：对于你们中的一些人来说，这个新信息可以产生一些线索 - 我通过Tidy HTML运行原始html以获取html错误列表，并且出现了以下内容：

line 1348 column 1698 - Warning: '<' + '/' + letter not allowed here
line 1356 column 1 - Warning: <div> isn't allowed in <h1> elements
line 1355 column 1 - Info: <h1> previously mentioned
line 1356 column 370 - Warning: <div> isn't allowed in <h1> elements
line 1355 column 1 - Info: <h1> previously mentioned
line 1357 column 1 - Warning: <div> isn't allowed in <h1> elements
line 1356 column 370 - Info: <h1> previously mentioned
line 1357 column 83 - Warning: discarding unexpected </div>
line 1357 column 138 - Warning: discarding unexpected </div>
line 1357 column 144 - Warning: discarding unexpected </div>
line 1378 column 1 - Warning: <div> isn't allowed in <h1> elements
line 1377 column 1 - Info: <h1> previously mentioned
line 1378 column 308 - Warning: <div> isn't allowed in <h1> elements
line 1377 column 1 - Info: <h1> previously mentioned
line 1379 column 1 - Warning: <div> isn't allowed in <h1> elements
line 1378 column 308 - Info: <h1> previously mentioned
line 1379 column 74 - Warning: discarding unexpected </div>
line 1379 column 121 - Warning: discarding unexpected </div>
line 1379 column 127 - Warning: discarding unexpected </div>
line 1400 column 1 - Warning: <div> isn't allowed in <h1> elements
line 1399 column 1 - Info: <h1> previously mentioned
line 1400 column 436 - Warning: <div> isn't allowed in <h1> elements
line 1399 column 1 - Info: <h1> previously mentioned
line 1401 column 1 - Warning: <div> isn't allowed in <h1> elements
line 1400 column 436 - Info: <h1> previously mentioned
line 1401 column 74 - Warning: discarding unexpected </div>
line 1401 column 136 - Warning: discarding unexpected </div>
line 1401 column 142 - Warning: discarding unexpected </div>
line 1363 column 44 - Warning: <img> lacks "alt" attribute
line 1439 column 61 - Warning: <a> attribute "href" lacks value
line 3 column 1 - Warning: <html> proprietary attribute "xmlns:fb"
line 3 column 1 - Warning: <html> proprietary attribute "xmlns:addthis"
Info: Document content looks like HTML5
Tidy found 23 warnings and 0 errors!

编辑3：更广泛地说，容器1也在响应模式3中跨越容器2，而不仅仅是其中的红框小部件。

编辑4：当我将原始html输出下载到我的桌面并从那里打开时 - 因此在从托管服务器中删除的环境中，未观察到容器1的不期望的跨越行为。

Answer 1

在图中，内部（2）的div包含标记为蓝色。它的原始样式是float: right，它将其从文档流中删除。更改为float: none会导致下面的div尊重其存在。

Answer 2

预期的行为是什么？

我将div#uplp-list-6532的宽度更改为100％，然后边框包装内容。那是你在找什么？

此外，您可以从较小视口中的div#main移除填充，但您不会在内容周围留下白边。

如何修复div容器的奇异跨越行为

2 个答案: