Question

我在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如果您需要，这是 FULL CSS 。

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

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

缩略图和注释不在COMMENTHOLDER DIV的边框内。

这就是我整天想要解决的问题。

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

Answer 1

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

#content .commentholder {
    display: block;
    padding: 5px 0 5px 0;
    border: 2px dotted #d2d9e7; /**********/
    height:100%;
    overflow:hidden;
}

Answer 2

你添加了一个浮动：左;你的.ccontent div但你没有清除浮动.. 在.ccontent之后添加一个带有class ='clear'的div，看看问题是否消失。您也可以尝试使用link中的解决方案。

嵌套浮动分区

2 个答案: