子div无法被父div包裹的解决方法

最新推荐文章于 2021-06-15 23:30:38 发布

灰来飞去

最新推荐文章于 2021-06-15 23:30:38 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：问题总结文章标签：错误经验

本文链接：https://blog.youkuaiyun.com/qianshanyou9054/article/details/84646244

问题总结专栏收录该内容

4 篇文章

订阅专栏

在网页制作中，因JS代码中多余的</section>标签，导致父div未能正确包裹子元素，影响了整体布局及样式应用。本文详细解析了问题原因，并分享了解决过程与经验教训。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天在制作网页过程中，遇到了这样一个bug：父div无法包裹子div，导致通过父div设置的css样式还需要在子div里设置一遍，具体情况如图：

底部版权栏并未被包裹在父div里，导致父div的css样式不能获取。

.wrapper {
  width: 1000px;
  margin: 30px auto 80px auto;
  background: #dedad3;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

我在尝试删除页面侧边栏时，版权栏能够正常显示了

为了赶时间，我将侧边栏放到顶部上传了网站，但是问题并没有从根本上解决，我晚上下班后琢磨了一下，应该是侧边栏的代码里有多余的标签，导致的这种情况，于是今天我又把侧边栏js重新看了一下，调试了几次终于发现果然是侧边栏的js里封装的代码有多余的一个 “ </section>”，这应该是以前封装这段代码时疏忽了，原代码段的</section>给封装进去了。而之前的网站之所以未发现这个问题，是由于都是用bootstrap制作的，没有用父div来设置整个页面的css样式。

document.writeln("    </div>");document.writeln("</form>");document.writeln(" </section>");document.writeln("</div>");

最后，总结一下这次错误的经验：

由于js代码段中多出了一个 “ </section>”标签，导致<div class="wrapper">未能包裹住版权栏部分。

以后要注意：js代码封装前要仔细检查，遇到问题后要认真排查。