Html CSS div'；重叠_Html_Css_Css Float

Html CSS div'；重叠

html css

Html CSS div'；重叠,html,css,css-float,Html,Css,Css Float,我正试图为我的网站建立一个评论区。在评论部分，我想展示WordPress风格，左边是头像。这是可行的，但是现在的情况是评论文本围绕着下面的化身。例如。这可能有一个简单的解决方案，但我是一个CSS爱好者。这是相关的XHTML和CSS： <div class="comment"> <div class="left"> <img src="images/noavatar.png" alt="No Avatar" /> </div> <d

我正试图为我的网站建立一个评论区。在评论部分，我想展示WordPress风格，左边是头像。这是可行的，但是现在的情况是评论文本围绕着下面的化身。例如。这可能有一个简单的解决方案，但我是一个CSS爱好者。这是相关的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; }


劳拉·布劳曼
2009年3月12日
我不知道该怎么办。取而代之的是河鼠。不允许，不允许，不允许，不允许，不允许，不允许。塞德十字勋章。拱形前庭、nec显贵前庭、rhoncus id前庭、eu苏打水前庭、quam前庭。纳拉姆·康格·亨德雷特·埃尼姆。福赛勒斯·里苏斯。Pellentsque lacus sem，luctus tempus
/*-------评论-------*/
#评论
{
宽度：91px；
高度：18px；
背景：url（images/comments.png）不重复；
文本缩进：-9000px；
边缘底部：10px；
}
部门意见
{
填充物：5px 5px 30px 5px；
背景：url（images/commentbar.png）底部中心不重复；
边缘底部：10px；
}
div.comment div.left{左边距：10px；浮点：左；宽度：51px；}
div.comment div.right{width:482px；}
div.comment div.right h3{color:#e6267c；字体大小：18px；显示：内联；文本转换：大写；}

将此添加到右侧的div.right

margin-left: 51px;

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

或浮动另一个块级元素。

从：

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

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

这意味着未定位的具有

display:block

的元素将忽略浮动

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

这意味着内联元素确实围绕浮动流动。这就是为什么您的

和

中的文本在div.left
中流动，即使
和div.right
不流动
表的边框框、块级替换元素或建立新块格式上下文的正常流中的元素（例如具有“溢出”而非“可见”的元素）不得与元素本身在同一块格式上下文中的任何浮动重叠。如有必要，实现应通过将所述元素放置在任何之前的浮动下方来清除所述元素，但如果有足够的空间，则可将其放置在此类浮动附近
而且，尽管这是迟钝的，但这就是你问题的答案。您必须插入一个“新”
浮动、绝对定位元素、内联块、表格单元格、表格标题以及“溢出”而不是“可见”的元素（该值已传播到视口时除外）建立新的块格式上下文
最简单的方法是：
请注意，您可能还需要：
修复相关但不同的问题。如果您的
内容比图像短，则浮动的div.left
将不会扩展div.comment
的高度。添加溢出：自动将带您进入规范中恰当命名的部分：
如果[Block level，当“overflow”未计算为“visible”时，正常流中未替换的元素的[Block level，non-replaced elements in normal flow]元素有任何浮动子体，其下边距边缘低于下边距边缘，则会增加高度以包括这些边缘
基本上说，浮动只会扩展包含元素的可见溢出
溢出：隐藏
也可以工作，但如果需要，它会裁剪内容而不是抛出滚动条
div.right { overflow: auto; }

div.comment { overflow: auto; }