1

我在一个 DIV 中有两个 MAIN DIV，它是页面的一部分。

<div class="commentholder">                                     
<div class="cthumbnail"> <!-- #1 -->
    <a href="#"><img src="source"></a>
</div>

<div class="ccontent"> <!-- #2 -->
    <a href="#" class="post_author">Dilip Raj Baral</a>

    this is a comment..

    <div class="clear"></div>

    <div class="cstatus">
        April 16, 2012 &#183;
        <a href="#" class="like">Like</a> &#183;
        <a href="#" class="likes">0</a>
    </div>

</div>

如图所示，CTHUMBNAIL 和 CCONTENT 是 DIV 中的两个主要 DIV。它们实际上是两列。CTHUMBNAIL 有一个图片的缩略图显示在左侧，CCONTENT 有评论。与它们相关的 CSS 是：

#content .commentholder {
    display: block;
    padding: 5px 0 5px 0;
    border: 2px dotted #d2d9e7; /**********/
    }
#content .ccontent {
    vertical-align: top;
    margin-left: 10px;
    float: left;
    width: 350px; /*change*/
#content .cstatus {
    display: block;
    float: left;
    margin-top: 1px;
    color: #979797;
    font-size: 11px;
    }
#content .cthumbnial {float: left;} 
#content .cthumbnail img {
    width: 32px;
    height: 32px;
    }

http://connectu.saipal.edu.np/styles/style.css如果您需要，这是完整的 CSS 。

COMMENTHOLDER div 应与浮动 DIV THUMBNAIL 和 CCONTENT 接壤。但事实并非如此。相反，它显示如下：

http://minus.com/mCCHNGVfu/（这是图片链接。我不允许包含图片。

Thumbnail 和 Comment 不在 COMMENTHOLDER DIV 的边界内。

这就是我一整天都在努力解决的问题。

一定是什么故障..请帮帮我！！

4

2 回答 2

1

试试下面的代码，height:100%; overflow:hidden这两个属性允许元素在高度上拉伸。每当您使用浮动 div 时，只需将这两个属性添加到父元素即可。

#content .commentholder {
    display: block;
    padding: 5px 0 5px 0;
    border: 2px dotted #d2d9e7; /**********/
    height:100%;
    overflow:hidden;
}
于 2012-06-18T09:20:56.663 回答
0

你添加了一个 float:left; 到您的 .ccontent div，但您没有清除浮动。在 .ccontent 之后添加一个带有 class='clear' 的 div，看看问题是否消失。您也可以在此链接中尝试解决方案。

于 2012-06-18T09:31:05.083 回答