8

我正在尝试为我的网站建立一个评论部分。在评论部分，我希望它采用 WordPress 风格的布局，头像在左侧。它可以工作，但正在发生的是评论文本环绕在下面的头像周围。例如，这里. 这可能有一个简单的解决方案，但我是 CSS 业余爱好者。这是相关的 XHTML 和 CSS：

/*------- COMMENTS -------*/

#comments {
  width: 91px;
  height: 18px;
  background: url(images/comments.png) no-repeat;
  text-indent: -9000px;
  margin-bottom: 10px;
}

div.comment {
  padding: 5px 5px 30px 5px;
  background: url(images/commentbar.png) bottom center no-repeat;
  margin-bottom: 10px;
}

div.comment div.left {
  margin-left: 10px;
  float: left;
  width: 51px;
}

div.comment div.right {
  width: 482px;
}

div.comment div.right h3 {
  color: #e6267c;
  font-size: 18px;
  display: inline;
  text-transform: uppercase;
}
<div class="comment">
  <div class="left">
    <img src="images/noavatar.png" alt="No Avatar" />
  </div>

  <div class="right">
    <h3>Laura Brauman</h3>
    <span>12 March 09</span>
    <p>Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est. Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus
      risus. Pellentesque lacus sem, luctus tempus.</p>
  </div>
</div>

4

4 回答 4

23

从规格：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。

display: block这意味着没有定位的元素会忽略浮动。

但是，浮动旁边创建的行框被缩短，以便为浮动的边距框腾出空间。

这意味着内联元素确实围绕浮点数流动。这就是为什么你的<span>和里面的文本会在<p>周围流动div.left，即使<p>anddiv.right不会。

表格的边框框、块级替换元素或建立新块格式化上下文的正常流中的元素（例如具有“溢出”而不是“可见”的元素）不得与与元素本身相同的块格式化上下文。如有必要，实现应通过将其放置在任何先前的浮动下方来清除所述元素，但如果有足够的空间，可以将其放置在此类浮动附近。

而且，这 - 尽管它很迟钝 - 是你问题的答案。您必须插入“新的块格式化上下文”。

浮动、绝对定位元素、内联块、表格单元格、表格标题和具有“溢出”而不是“可见”的元素（除非该值已传播到视口）建立新的块格式化上下文。

对你来说最简单的是1：

div.right { overflow: auto; }

请注意，您可能还需要1：

div.comment { overflow: auto; }

解决一个相关但不同的问题。如果您的<p>内容比您的图像短，则浮动div.left不会扩大div.comment. 添加将overflow: auto;带您进入规范中恰当命名的复杂案例部分：

如果 [在“溢出”不计算为“可见”时正常流中的块级、非替换元素] 元素具有任何浮动后代，其底部边距边缘低于底部，则高度增加以包括这些边缘

这基本上说浮动只扩展overflow <> visible包含的元素。

1 overflow: hidden;也可以，但如果需要，会裁剪内容而不是抛出滚动条。

于 2009-04-03T03:03:08.497 回答
2

您所看到的是内联元素会尊重浮点数，但块级元素不会。您必须手动在它们周围留出空间，否则浮动会与它们重叠。

或者浮动另一个块级元素。

于 2009-04-03T02:29:56.330 回答
0

将此添加到 div.right

margin-left: 51px;
于 2009-04-03T02:26:39.117 回答
0 
div.right { float: left; width: 482px; }
于 2009-04-03T02:30:21.260 回答