CSS div的重叠

Question

我正在尝试为我的网站建立一个评论部分。在评论部分，我想要它布局WordPress风格，左边的化身。它有效，但正在发生的是评论文本环绕下面的化身。例如，here。这可能有一个简单的解决方案，但我是一个CSS amatuer。这是相关的XHTML和CSS：

<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>

/*------- 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; }

Answer 1

将其添加到div.right

margin-left: 51px;

Answer 2

来自spec：

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

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

但是，浮动旁边创建的线框会缩短，以便为浮动的边距框留出空间。

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

表的边框，块级替换元素或正常流中建立新块格式化上下文的元素（例如“溢出”除“可见”之外的元素）不得与任何浮点重叠。与元素本身相同的块格式化上下文。如果需要，实现应该通过将所述元素放置在任何前面的浮动下面来清除所述元素，但是如果有足够的空间，可以将它放置在这些浮动的附近。

而且，这个 - 实际上是钝的 - 是你问题的答案。你必须插入一个“新的block formatting context”。

浮点数，绝对定位元素，内联块，表格单元格，表格标题以及除“可见”以外的“溢出”元素（除非该值已传播到视口时）建立新的块格式化上下文。

最简单的这些是你1：

div.right { overflow: auto; }

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

div.comment { overflow: auto; }

修复一个相关但不同的问题。如果你的<p>内容比你的图像短，那么浮动的div.left将不会扩展div.comment的高度。添加overflow: auto;将带您进入规范中恰当命名的Complicated Cases部分：

如果[溢出时'正常流中的块级，未替换元素不计算为'可见']元素具有任何浮动后代，其底部边缘位于底部下方，则高度会增加以包括这些边缘

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

1 overflow: hidden;也可以工作，但如果需要的话会裁剪内容而不是投掷滚动条。

Answer 3

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

要么那么浮动其他块级元素。

Answer 4

div.right { float: left; width: 482px; }