0

我有这样的规则：

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就通过了。基本上看起来内容中间有一条线。有任何想法吗？

我会试着举一个可行的例子。

4

1 回答 1

0

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

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

于 2012-04-07T10:54:48.703 回答