Question

我有这样的规则：

body{border:1px solid gray;}

#middle{
float:left;
margin-left:3%;
margin-top:20px;
width:41%;
border-top:solid #aaaaaa 1px;
}

.message-content{
padding:0 10px 0 10px;
float:left;
}

我的HTML就像：

<html>
<body>
<div id="middle">
  <div class="message-content">Loris ipsidum</div>
  <div class="message-content">Loris ipsidum</div>
<div id="clear"></div>
</div>
</body>
</html>

我试图在JSFiddle中复制它，但我无法做到。基本上，正在发生的事情是，在我获得许多消息内容div之后，传递body规则定义的边界。它基本上看起来就像在内容的中间有一条线。有什么想法吗？

我会尝试一个有效的例子。

Answer 1

由于您的#middle元素是浮动的，因此它们不计入父级的高度（在本例中为正文），因此正文仅占用窗口的高度。

您似乎没有为clear元素定义#clear样式。即便如此，clear元素应该是之后的，而不是浮动元素。

CSS：身体边界不会像中间div一样扩展？

1 个答案: