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

来自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 2

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

或者浮动其他块级元素。

Answer 3

将此添加到div.right

margin-left: 51px;

Answer 4

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

CSS div的重叠

4 个答案: