html – 为什么子div超出了它们的父div？_html-js-css

概述我觉得这很愚蠢,但这是一个非常简单的问题,不明白如何解决.在下面的代码中,为什么容器,主要和辅助div扩展到标题之外？我知道它是因为我已经分配给容器的填充而发生的,但我已经为html元素分配了最大宽度. header元素遵循最大宽度,但容器及其子div不是.我在这里看过类似的问题,但没有看到任何我认为与我的特殊情况相关的问题.这里发生了什么？谢谢. 的test.html <!DOCTYPE ht 我觉得这很愚蠢,但这是一个非常简单的问题,不明白如何解决.在下面的代码中,为什么容器,主要和辅助div扩展到标题之外？我知道它是因为我已经分配给容器的填充而发生的,但我已经为HTML元素分配了最大宽度. header元素遵循最大宽度,但容器及其子div不是.我在这里看过类似的问题,但没有看到任何我认为与我的特殊情况相关的问题.这里发生了什么？

谢谢.

的test.HTML

<!DOCTYPE HTML><HTML><head>    <Meta charset="UTF-8">    <Title>Test</Title>    <link rel="stylesheet" href="../reset.CSS" />    <style type="text/CSS">        HTML {            max-wIDth: 960px;            margin: 0 auto;            position: relative;        }        header {             height: 2.5em;            background: #2a3744;             color: #fff;        }        body {            Font-size: 100%;            -moz-Box-sizing: border-Box;            -webkit-Box-sizing: border-Box;            Box-sizing: border-Box;        }        .container {            wIDth: 100%;            padding: 1em;            margin: 0 auto;            background: #ccc;        }        .main { background: #cf6; }        .secondary { background: #fc6; }    </style></head><body>    <header role="banner">        header    </header>    <div >        <div >            main                   </div>        <div >            secondary        </div>    </div></body></HTML>

解决方法填充：容器上的1em和宽度：100％使实际宽度100％2em.

你应该添加Box-sizing：border-Box;到.cointainer以确保宽度为100％(example).

总结

以上是内存溢出为你收集整理的html – 为什么子div超出了它们的父div？全部内容，希望文章能够帮你解决html – 为什么子div超出了它们的父div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1106834.html

html – 为什么子div超出了它们的父div？

发表评论

评论列表（0条）