两个独立的 div，为什么一个渲染在另一个里面？

Question

html before rendering

因此，我首先使用他们的木材框架在 shopify 中编写商店代码，该框架利用 css 魔法响应网格。

正如您在图片中看到的那样，有一个网格，一个 div 应该跨越四分之一，另一个应该跨越 3 个四分之一。

现在查看页面时，3/4 宽度的 div 呈现在 1/4 div 内，而不是在它之后。如此处所示： html after rendering

这绝对没有意义，我不明白为什么会发生这种情况，因为如果我交换它们以使 3/4 宽度的 div 位于四分之一宽度的 div 之前，它们都可以很好且独立地渲染，为什么这发生了？

Answer 1

所有的 html 标签都正确关闭了吗？ 我建议您查看 html 页面的代码源，而不是使用浏览器开发工具来查看未解释的 DOM 树。