簡體   English   中英

CSS div的重疊

[英]CSS div's overlapping

我正在嘗試為我的網站建立一個評論部分。 在評論部分,我想要它布局WordPress風格,左邊的化身。 它有效,但正在發生的是評論文本環繞下面的化身。 舉個例子, 這里 這可能有一個簡單的解決方案,但我是一個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; }

規格

由於浮動不在流中,因此在浮動框之前和之后創建的非定位塊框垂直流動,就像浮動不存在一樣。

這意味着具有display: block元素沒有定位,忽略了float。

但是,浮動旁邊創建的線框會縮短,以便為浮動的邊距框留出空間。

這意味着內聯元素會在浮點數周圍流動。 這就是你的<span><p>的文本圍繞div.left流動的div.left ,即使<p>div.right沒有。

表的邊框,塊級替換元素或正常流中建立新塊格式化上下文的元素(例如“溢出”除“可見”之外的元素)不得與任何浮點重疊。與元素本身相同的塊格式化上下文。 如果需要,實現應該通過將所述元素放置在任何前面的浮動下面來清除所述元素,但是如果有足夠的空間,可以將它放置在這些浮動的附近。

而且,這個 - 實際上是鈍的 - 是你問題的答案。 您必須插入“新塊格式化上下文 ”。

浮點數,絕對定位元素,內聯塊,表格單元格,表格標題以及除“可見”以外的“溢出”元素(除非該值已傳播到視口時)建立新的塊格式化上下文。

對你來說最簡單的是1

div.right { overflow: auto; }

請注意,您可能需要1

div.comment { overflow: auto; }

修復一個相關但不同的問題。 如果<p>內容比圖像短,則浮動的div.left不會擴展div.comment的高度。 添加overflow: auto; 將您帶入規范中恰當命名的Complicated Cases部分:

如果['溢出'時正常流程中的塊級,未替換元素未計算為'可見']元素具有任何浮動后代,其底部邊緣位於底部下方,則高度會增加以包括這些邊緣

這基本上說浮動只擴展overflow <> visible包含元素。

1 overflow: hidden; 也會工作,但如果需要,會裁剪內容而不是拋出滾動條。

你所看到的是內聯元素將尊重浮點數,但塊級元素不會。 您必須在它們周圍手動放置空間,否則浮動將重疊它們。

要么那么浮動其他塊級元素。

將其添加到div.right

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM