1

ページの一部であるDIV内に2つのメイン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内の2つの主要なDIVです。それらは実際には2つの列です。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/（これは画像のリンクです。画像を含めることは許可されていませんでした。

サムネイルとコメントは、COMMENTHOLDERDIVの境界内にありません。

これは私が一日中修正しようとしていたものです。

グリッチは何でしょう..助けてください！

4

2 に答える 2

1

以下のコードを試してみてください。height:100%; overflow:hiddenこれらの2つのプロパティにより、要素を高さ方向に伸ばすことができます。フローティングdivを使用する場合は常に、これら2つのプロパティを親要素に追加するだけです。

#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に追加しましたが、floatをクリアしませんでした。.ccontentの後にclass ='clear'を指定してdivを追加し、問題が解決するかどうかを確認してください。また、このリンクで解決策を試すことができます。

于 2012-06-18T09:31:05.083 に答える