CSS div的重叠

作者：凹凸曼00威威_694 | 2023-08-28 14:52

如何解决《CSSdiv的重叠》经验，为你挑选了1个好方法。

我正在尝试为我的网站建立一个评论部分.在评论部分,我希望它布局为wordpress风格,左边的化身.它有效,但正在发生的是评论文本环绕下面的化身.举个例子,这里.这可能有一个简单的解决方案,但我是一个CSS amatuer.这是相关的XHTML和CSS:


 
  
 

 
  Laura Brauman
  12 March 09
  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.
 


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

Mark Bracket.. 23

从规格:

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

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

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

这意味着内联元素会在浮点数周围流动.这就是为什么你和它内部的文本

流动div.left,即使

并且div.right没有.

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

而且,这个 - 实际上是钝的 - 是你问题的答案.您必须插入"新块格式化上下文 ".

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

对你来说最简单的是1:

div.right { overflow: auto; }

请注意,您可能还需要1:

div.comment { overflow: auto; }

修复一个相关但不同的问题.如果您的

内容比图片短,则浮动div.left内容不会扩展高度div.comment.添加overflow: auto;将您带入规范的恰当命名的Complicated Cases部分:

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

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

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

1> Mark Bracket..：