为什么我的 div 超出了它的父 div？

Question

为什么我的 div 超出了它的父 div？

id 为“message-box”的 Div 超出其父 div“message-container” 我不明白为什么？

我使用了“溢出：自动；” 在我的“消息框”的 css 中。但它仍然没有给我想要的结果。当我在“消息框”上使用“溢出：自动”时，左边距无法正常工作。

下面是我的 HTML 文件：

<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css" >  
<title>temp</title>
</head>

<body>

<div id="main">

<div id="header">header</div>

<div id="container">
    <div id="user-container">user</div>

    <div id="message-container">
        <div id="message-box">message box</div>
        <div id="text-box"> text box</div>
    </div>
</div>

<div id="footer">footer</div>
</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

下面是我的 CSS 文件：

#main{
    border: 1px solid red;
    margin: 5px;
}

#header{
    border: 1px solid red;
    height:30px;
    margin: 10px;
}

#container{
    margin:10px;
    height:32em;
}
#footer{
    border: 1px solid red;
    height:30px;
    margin: 10px;
}

#user-container{
    border: 1px solid red;
    float:left;
    width:120px;
    height:32em;    
}
#message-container{
    border: 1px solid red;
    height:32em;
    width:100%;

}
#message-box{
    border: 1px solid grey;
    overflow:auto;
    margin:5px;
}
#text-box{
    border:1px solid grey;
    overflow:auto;
    margin:5px;
}

Run Code Online (Sandbox Code Playgroud)

请有人帮助我。

Answer 1

fem*_*tem 5

快速回答

你#message-box有正确的页边相对于#message-containerDIV，但问题是，无论#message-container和#message-box满溢成#user-container。由于#message-box具有overflow属性，因此它会在溢出到#user-container. 由于#message-container没有overflow，它继续从后面流到div#user-container的边缘#container。要解决此问题，请添加overflow到#message-container.

#message-container {
  height: 32em;
  border: 1px solid red;
  overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

我认为您在这里想要的是overflow: hidden剪辑溢出的内容；overflow: auto添加滚动条以查看溢出的内容。

解释

在float上#user-container导致了问题。浮动从普通文档“流”中删除一个元素（参见下面的普通文档流）。

我为#user-container（绿色）和#message-container（蓝色）添加了背景颜色，这样你就可以看到发生了什么。如果您overflow从#text-boxand 中删除#message-box，您会看到边距实际上在#message-box和之间正常工作#message-container。将它们添加回来，您将看到它们是如何被#user-container.

这就是正在发生的事情 http://jsfiddle.net/fmceqbdp/2/

正常文件流程

DOM 具有元素层次结构。文档是最高级别的父元素（或最外层的框），您添加的任何元素都是其子元素。元素的起始位置是其父元素的左上角。如果在同一级别（非嵌套）添加另一个元素，则它是文档的另一个子元素，并且是第一个元素的同级元素。同级也希望尽可能靠近文档的左上角，但它会被第一个元素（内联）或下一行（块）推到右边。当您在该元素中嵌套一个元素时，嵌套元素是子元素，它包含在父元素中。它的起始位置是其父元素的左上角。这是正常的文档流程。一个浮动的元素会从这个正常的流中移除，所以它不会像往常一样推动其他元素。

浮动的行为方式

Div 是块元素，它们会将其他元素推开。但是，当您浮动一个元素时，它会从正常的文档流中删除该元素——这意味着它的位置对同级元素（同一级别的元素）不可见，因此它们现在位于浮动元素的前面或后面，如虽然浮动元素不存在。因为你飘了#user-container，#message-container填满了整个#container仿佛#user-container不存在。

溢出的工作原理

具有该overflow属性的元素将从溢出到其他元素中自行清除。这也是为什么#message-container流入空间所占据的，#user-container但它的子项#message-box和#text-box溢出属性已经清除了自己流入空间#user-container。它们的边距仍然相对于它们的父级#message-container，而不是它们被剪裁的位置，这就是为什么看起来它们遇到的地方没有左边距#user-container。

有关更多详细信息，请参阅 http://css-tricks.com/the-css-overflow-property/ -- 向下滚动页面约 1/4。

归档时间：	11 年，2 月前
查看次数：	9044 次
最近记录：	11 年，2 月前